:root{
  /* Licht én donker: scrollbalken, automatisch ingevulde velden e.d. volgen het thema */
  color-scheme:light dark;
  /* Kleur — merk */
  --terracotta:#a75348;
  --terracotta-dark:#8a4034;
  --flame:#ee5d33;
  --raspberry:#db3d63;
  --ochre:#e6a52c;

  /* Kleur — neutraal */
  --blush:#f0c2b3;
  --clay:#c7867e;
  --cream:#fbf6f2;
  --cream-warm:#f6efe8;
  --ink:#4a2e28;

  /* Tekst */
  --text-2:#5c443d;
  --text-4:#7a5b52;
  --text-muted:#7c655b;   /* AA op crème/wit (was #b7a49b, ~2.2:1); dark-blokken zetten een lichte variant */
  --text-on-dark:#fbeee9;

  /* Formulier */
  --field-line:#e3c9c1;
  --field-error:#c0392b;
  --btn-disabled:#dcc7bd;

  /* Vlakken */

  /* Social */
  --linkedin:#0a66c2;
  --instagram:#e1306c;

  /* Typografie */
  --font-display:'Mikela','Yeseva One',serif;
  --font-body:'Quicksand',system-ui,sans-serif;
  --font-label:'Larosa Sans',sans-serif;
  --font-hand:'Caveat',cursive;
  --fs-body:15px;
  --fs-label:12px;
  --lh-body:1.75;
  --ls-label:.3em;

  /* Radius */
  --r-hero:28px;
  --r-card:20px;
  --r-tile:16px;
  --r-postcard:14px;
  --r-nav:18px;
  --r-pill:999px;

  /* Schaduw */
  --sh-hero:0 30px 70px rgba(74,46,40,.18);
  --sh-card:0 18px 46px rgba(74,46,40,.24);
  --sh-polaroid:0 24px 54px rgba(0,0,0,.3);
  --sh-postcard:0 22px 54px rgba(74,46,40,.22);
  --sh-nav:0 8px 30px rgba(74,46,40,.14);
  --sh-tile:0 2px 10px rgba(74,46,40,.05);
  --sh-tile-hover:0 18px 40px rgba(74,46,40,.2);

  /* Ruimte */

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);          /* standaard: snel weg, zacht landen */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);   /* kleine overshoot: stempels, knoppen */
  --ease-in:cubic-bezier(.5,0,.7,1);         /* uitgaand: wegvliegen, sluiten */
  --dur-quick:.15s;   /* reduced motion, snelle wissel */
  --dur-fast:.2s;     /* hover */
  --dur-base:.35s;    /* fades, kleurwissels */
  --dur-move:.42s;    /* menubalk, waaier, dienstblokken */
  --dur-emph:.6s;     /* bevestiging, fotozoom */
  --dur-slow:.8s;     /* scroll-reveal */

  /* Breakpoints (referentie, niet bruikbaar in @media) */
  /* phone <=640px · deck <=700px · tablet 641-1099px · desktop >=1100px */

  /* -------- Rol-tokens (LICHT — gelijk aan het bestaande ontwerp) -------- */
  --surface:var(--cream);            /* pagina-achtergrond */
  --surface-2:var(--cream-warm);     /* "Ander werk" */
  --surface-raised:#ffffff;          /* dienstkaarten */
  --surface-raised-2:#fffdfb;        /* ansichtkaart */
  --content:var(--ink);              /* bodytekst */
  --content-2:var(--text-2);
  --content-muted:var(--text-4);     /* AA (was --text-3 #9a8378, ~3.3:1) */
  --heading:var(--terracotta);       /* koppen/links op een licht vlak */
  --eyebrow:#9a5a4c;                  /* AA op crème (was clay #c7867e, ~2.7:1), blijft warm */
  --border:var(--field-line);
  --nav-bg1:rgba(251,246,242,.62);
  --nav-bg2:rgba(251,246,242,.4);
  --nav-border:rgba(199,134,126,.28);
  --contact-grad:linear-gradient(160deg,#f3ddd4,#eec4b6);
  --about-grad:linear-gradient(160deg,#a75348,#8a4034);
  --footer-bg:var(--terracotta-dark);   /* was clay #c7867e → te weinig contrast met lichte footertekst (WCAG AA) */
  --modal-surface:var(--cream);
  --modal-close-bg:rgba(74,46,40,.08);
}

/* -------- Donker palet -------- */
/* Volgt de systeemvoorkeur (werkt ook zonder JS) */
@media (prefers-color-scheme: dark){
  :root{
    /* Rustige warme-houtskool basis met AFWISSELENDE tinten voor sectie-onderscheid:
       basis (--surface) en een lichter niveau (--surface-2) wisselen elkaar af,
       met twee diepe ankers (Over mij, footer) en een warme contact-tint. */
    --surface:#201c1a;          /* basis-secties (werk, diensten) */
    --surface-2:#2a2522;        /* lichter niveau (merkenrij, ander werk) */
    --surface-raised:#332d29;   /* dienstkaarten */
    --surface-raised-2:#3f3835; /* ansichtkaart */
    --content:#ece4df;
    --content-2:#c5bab4;
    --content-muted:#968b85;
    --text-muted:#bcaaa0;
    --heading:#e0906f;
    --eyebrow:#c08b7d;
    --border:rgba(236,228,223,.10);
    --nav-bg1:rgba(28,24,22,.74);
    --nav-bg2:rgba(28,24,22,.54);
    --nav-border:rgba(255,255,255,.06);
    --contact-grad:linear-gradient(160deg,#2c211a,#221913);
    --about-grad:linear-gradient(160deg,#2c1c15,#1a130f);
    --footer-bg:#1a1512;
    --modal-surface:#332d29;
    --modal-close-bg:rgba(236,228,223,.12);
    --field-error:#ff8f80;   /* leesbaar rood op de donkere ansichtkaart */
  }
}