/* ==================================================================
   tokens-erika.css  -  het Erika v2 design-system (tokens).
   Overgenomen uit de Claude Design-export (design-system 2a299009):
   colors + typography + spacing + shape + elevation + motion.
   Alleen CSS-variabelen en keyframes; geen element-opmaak (die blijft in
   home.css / paginabladen). Herbruikbaar voor alle paginatypes.
   ================================================================== */

/* Kleur. Bron: het :root-blok van
   site/wp-content/themes/kadence-erika/assets/home.css, vastgelegd als
   merkpalet in werk/02-kaders/palet.md (Erika v2).
   Het oudere accent #660099 is vervallen en staat hier niet meer. */
:root{
  /* --- basis: aubergine (primair merkaccent) --- */
  --aubergine:#4a3461;
  --aubergine-deep:#2f2042;
  --aubergine-soft:#6b5180;
  --aubergine-mist:#e8def0;

  /* --- basis: teal (secundair, labels en accenten) --- */
  --teal:#3a6b62;
  --teal-deep:#2a4f48;
  --teal-soft:#5a8a80;
  --teal-mist:#d8e4df;

  /* --- basis: warme gronden --- */
  --paper:#faf5ec;
  --paper-warm:#f6efe0;
  --cream:#f1e8d8;
  --cream-warm:#ebdfc8;

  /* --- basis: inkt --- */
  --ink:#2a2330;
  --ink-soft:#5a5060;
  --ink-mist:#8a8090;

  /* --- zachte sectietinten --- */
  --sage:#b8c4ad;
  --sage-light:#eaf3ee;
  --rose:#dcb5ae;
  --rose-light:#f6dde1;
  --lila:#e8dcef;
  --lila-light:#f0e6f5;
  --blush:#e8c8d8;

  /* --- losse merkwaarden --- */
  --logo-purple:#693182;      /* zit alleen in het logobestand, geen UI-kleur */
  --whatsapp:#25d366;
  --star:#e8c98c;

  /* --- semantisch: oppervlak --- */
  --surface-page:var(--paper);
  --surface-page-warm:var(--paper-warm);
  --surface-section-cream:var(--cream);
  --surface-card:rgba(255,255,255,.55);
  --surface-card-hover:rgba(255,255,255,.85);
  --surface-card-dark:rgba(255,255,255,.06);
  --surface-card-dark-hover:rgba(255,255,255,.1);
  --surface-deep:var(--aubergine-deep);
  --surface-deep-teal:var(--teal-deep);
  --surface-nav:rgba(250,245,236,.78);

  /* --- semantisch: tekst --- */
  --text-heading:var(--aubergine);
  --text-body:var(--ink-soft);
  --text-strong:var(--ink);
  --text-muted:var(--ink-mist);
  --text-accent:var(--teal);
  --text-on-dark:#ffffff;
  --text-on-dark-soft:#cfb8d9;
  --text-on-teal-soft:#cfdfd9;
  --text-label-dark:#b8d4ca;

  /* --- semantisch: interactie --- */
  --action-primary:var(--aubergine);
  --action-primary-hover:var(--aubergine-deep);
  --action-primary-text:#ffffff;
  --action-ghost-border:rgba(74,52,97,.2);
  --action-ghost-border-hover:var(--aubergine);
  --action-ghost-wash:rgba(74,52,97,.04);
  --action-nav-wash:rgba(74,52,97,.06);
  --action-nav-wash-active:rgba(74,52,97,.08);
  --focus-ring:var(--aubergine-mist);
  --selection-bg:var(--aubergine-mist);
  --selection-fg:var(--aubergine-deep);

  /* --- semantisch: lijnen en velden --- */
  --hairline:rgba(74,52,97,.18);
  --hairline-on-dark:rgba(255,255,255,.18);
  --field-bg:#ffffff;
  --field-border:#e3d8c4;
  --field-border-focus:var(--aubergine);

  /* --- semantisch: berichten --- */
  --notice-ok-bg:var(--teal-mist);
  --notice-ok-fg:var(--teal-deep);
  --notice-ok-border:var(--teal-soft);
  --notice-err-bg:#f6e2df;
  --notice-err-fg:#8a3a2f;
  --notice-err-border:#e0b3aa;
  --notice-attention-bg:var(--aubergine-mist);
  --notice-attention-fg:var(--aubergine-deep);
  --notice-attention-border:#d8c8e4;
}


/* Typografie. Cormorant Garamond voor koppen en citaten,
   Inter voor lopende tekst en UI. Waarden letterlijk uit home.css. */
:root{
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-light:300; /* @kind font */   /* lopende tekst, de standaard van de site */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */

  /* display / koppen (Cormorant, altijd 400 of 500) */
  --text-hero:clamp(44px,5.6vw,72px);
  --text-h1:clamp(42px,5vw,64px);
  --text-h2:clamp(40px,4.5vw,58px);
  --text-h2-sm:clamp(36px,4vw,52px);
  --text-h3:32px;
  --text-h3-sm:24px;
  --text-quote-xl:clamp(22px,2.8vw,34px);
  --text-quote:22px;
  --text-quote-sm:21px;
  --text-numeral:38px;

  /* body (Inter) */
  --text-lede:17px;
  --text-body:16.5px;
  --text-body-sm:15px;
  --text-body-xs:14.5px;
  --text-ui:13.5px;
  --text-meta:12.5px;
  --text-micro:11px;

  /* regelhoogte */
  --leading-display:1.06; /* @kind font */
  --leading-hero:1.04; /* @kind font */
  --leading-heading:1.18; /* @kind font */
  --leading-quote:1.4; /* @kind font */
  --leading-body:1.85; /* @kind font */
  --leading-body-tight:1.75; /* @kind font */

  /* letterspatiëring */
  --tracking-display:-.02em; /* @kind font */
  --tracking-display-tight:-.024em; /* @kind font */
  --tracking-body:.005em; /* @kind font */
  --tracking-eyebrow:.32em; /* @kind font */   /* secties: WAT WIJ DOEN */
  --tracking-label:.24em; /* @kind font */     /* labels in kaarten en voet */
  --tracking-topbar:.04em; /* @kind font */
}


/* Ruimte en layout. De site is royaal: secties van 160px,
   een kolom van 1180px met 44px marge. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:56px;
  --space-10:80px;
  --space-11:120px;
  --space-12:160px;

  --wrap-max:1180px;
  --wrap-pad:44px;
  --wrap-pad-mobile:24px;
  --measure:560px;        /* leesbreedte lopende tekst */
  --measure-narrow:480px;

  --section-y:160px;
  --section-y-mobile:120px;
  --nav-height:90px;
  --topbar-height:42px;
  --stickybar-height:58px;
  --tap-min:48px;         /* minimale raakvlakhoogte, publiek is vaak ouder */
}


/* Vormtaal. Organisch en asymmetrisch: geen enkele kaart heeft
   vier gelijke hoeken. Waarden letterlijk uit home.css. */
:root{
  --radius-pill:999px;
  --radius-circle:50%;
  --radius-field:12px;
  --radius-notice:14px;
  --radius-panel:22px;

  /* asymmetrische kaarten, per rol */
  --radius-petal:38px 28px 38px 28px;
  --radius-petal-alt:28px 38px 28px 38px;
  --radius-review:32px 24px 32px 24px;
  --radius-review-alt:24px 32px 24px 32px;
  --radius-way:26px 22px 26px 22px;
  --radius-way-hover:22px 26px 22px 26px;
  --radius-pull:24px 28px 22px 26px;
  --radius-quote-card:30px 28px 32px 26px;
  --radius-contact-card:50px 40px 50px 40px;
  --radius-form:28px 24px 30px 22px;
  --radius-peek:64px 22px 22px 64px;

  /* blobs: beeldmaskers en icoonvlakken */
  --blob-1:62% 38% 54% 46% / 50% 56% 44% 50%; /* @kind radius */
  --blob-2:56% 44% 52% 48% / 48% 56% 44% 52%; /* @kind radius */
  --blob-3:52% 48% 56% 44% / 46% 54% 46% 54%; /* @kind radius */
  --blob-panel:58% 42% 50% 50% / 48% 56% 44% 52%; /* @kind radius */
  --blob-icon:60% 40% 55% 45% / 50% 60% 40% 50%; /* @kind radius */
  --leaf:50% 0 50% 50%; /* @kind radius */   /* blaadje naast eyebrow-labels, -30deg gedraaid */

  --blur-glass:blur(6px); /* @kind other */
  --blur-nav:blur(16px) saturate(1.1); /* @kind other */
  --blur-blob:blur(70px); /* @kind other */
}


/* Schaduw. Altijd diffuus, altijd met negatieve spread:
   de site kent geen harde slagschaduw en geen randen om kaarten. */
:root{
  --shadow-card:0 30px 60px -40px rgba(74,52,97,.18);
  --shadow-card-hover:0 40px 80px -30px rgba(74,52,97,.25);
  --shadow-soft:0 14px 32px -22px rgba(74,52,97,.18);
  --shadow-pull:0 24px 50px -28px rgba(74,52,97,.25);
  --shadow-peek:0 18px 40px -22px rgba(74,52,97,.25);
  --shadow-peek-hover:0 26px 50px -22px rgba(74,52,97,.32);
  --shadow-tag:0 12px 28px -14px rgba(74,52,97,.3);
  --shadow-photo:0 50px 90px -36px rgba(74,52,97,.45);
  --shadow-deep:0 50px 100px -40px rgba(42,32,66,.5);
  --shadow-quote-card:0 36px 70px -32px rgba(42,32,66,.35);
  --shadow-form:0 30px 60px -40px rgba(74,52,97,.35);

  --shadow-btn:0 12px 28px -16px rgba(74,52,97,.65);
  --shadow-btn-hover:0 18px 36px -18px rgba(74,52,97,.7);

  --shadow-on-dark:0 24px 50px -28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-on-dark-hover:0 32px 60px -28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  --ring-portrait:0 0 0 3px var(--paper), 0 0 0 4px rgba(74,52,97,.15);
}


/* Beweging. Norm uit de klantbrief: beweging mag toenemen naarmate de
   urgentie afneemt. Op het acute pad (een overlijden, plaatspagina's) alleen
   kleur- en opacity-overgangen; op oriënterende pagina's mogen de trage
   drift- en morph-animaties mee. prefers-reduced-motion altijd respecteren. */
:root{
  --ease-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-reveal:cubic-bezier(.22,.61,.36,1); /* @kind other */

  --dur-color:.4s; /* @kind other */      /* universele kleurovergang op alles */
  --dur-ui:.35s; /* @kind other */        /* knoppen, links, kaarten */
  --dur-card:.55s; /* @kind other */      /* kaart die opkomt bij hover */
  --dur-reveal:1.1s; /* @kind other */    /* scroll-reveal van stappen */

  --stagger-step:.16s; /* @kind other */  /* vertraging per opvolgend element */

  --dur-drift:18s; /* @kind other */      /* zwevende achtergrondblob */
  --dur-morph:24s; /* @kind other */      /* blob die van vorm verandert */
  --dur-breathe:10s; /* @kind other */    /* zacht ademen van een gloed */
  --dur-pulse:3.2s; /* @kind other */     /* bereikbaarheidsstip */

  --lift-hover:-2px; /* @kind other */    /* knop en kaart komen 2px omhoog */
  --lift-card:-4px; /* @kind other */
  --shift-arrow:4px; /* @kind other */    /* pijl schuift mee bij hover */
}

@keyframes erika-drift{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,-18px) rotate(2deg)}}
@keyframes erika-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-22px,12px) scale(1.04)}}
@keyframes erika-breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.75;transform:scale(1.03)}}
@keyframes erika-pulse-soft{0%,100%{opacity:.85}50%{opacity:.45}}
@keyframes erika-morph{0%,100%{border-radius:62% 38% 54% 46% / 50% 56% 44% 50%}50%{border-radius:54% 46% 62% 38% / 56% 44% 50% 50%}}
@keyframes erika-hover-soft{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}