/* ═══════════════════════════════════════════════════════════════════════════
   STERRENVERHAAL · DESIGN-TOKENS — de ene bron van waarheid voor alle skins.
   Referentie/bedoeling: design/niches/sterrenverhaal-*-styleguide.html
   Werkwijze en familieregels: design/README.md

   Structuur:
   1. :root            — basis-tokens, familiebreed (fonts, radii, merk-sterren,
                         en de product-kleuren nacht/goud)
   2. [data-niche=…]   — per niche een blok dat ALLEEN kleur-tokens zet
                         (kind · liefde · gezin · vriendschap · momenten)
   3. [data-niche="poort"] — de paraplu (basis-URL); geen niche, eigen palet.

   Regels (afgedwongen door scripts/design-rules-test.js):
   • Goud #D4AA5A bestaat uitsluitend als product-token (--gold): het hoort bij
     nacht/sterrenkaart-renders ín het product, nooit bij UI. Uitzondering: de
     poort — die ís de hemel (bewuste ontwerpkeuze, zie README).
   • Tekst-op-papier en tekst-op-veld halen WCAG AA per niche;
     momenten: --ondark op --field-top/-bot ≥ 9:1.
   • Componenten verwijzen ALTIJD naar tokens — nooit losse hexwaarden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts — zelf-gehost (geen extern CDN; privacy + determinisme), zelfde
   bestanden als het boek. De enige drie families, site-breed. ── */
@font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/italiana-v21-latin-regular.woff2') format('woff2'),url('/fonts/italiana-v21-latin-regular.ttf') format('truetype');}
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/crimson-pro-v28-latin-regular.woff2') format('woff2'),url('/fonts/crimson-pro-v28-latin-regular.ttf') format('truetype');}
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/crimson-pro-v28-latin-500.woff2') format('woff2'),url('/fonts/crimson-pro-v28-latin-500.ttf') format('truetype');}
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/crimson-pro-v28-latin-600.woff2') format('woff2'),url('/fonts/crimson-pro-v28-latin-600.ttf') format('truetype');}
@font-face{font-family:'Crimson Pro';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/crimson-pro-v28-latin-italic.woff2') format('woff2'),url('/fonts/crimson-pro-v28-latin-italic.ttf') format('truetype');}
@font-face{font-family:'Jura';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/jura-v34-latin-300.woff2') format('woff2'),url('/fonts/jura-v34-latin-300.ttf') format('truetype');}
@font-face{font-family:'Jura';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jura-v34-latin-500.woff2') format('woff2'),url('/fonts/jura-v34-latin-500.ttf') format('truetype');}

:root{
  /* typografie — de enige drie families, site-breed */
  --font-display:'Italiana',serif;
  --font-body:'Crimson Pro',serif;
  --font-label:'Jura',sans-serif;

  /* radii */
  --r-pill:999px;      /* knoppen/pills/badges */
  --r-kaart:1.2rem;    /* invoer-/studiokaarten (branches) */
  --r-paneel:1rem;     /* dropdown-panelen, overzichten */
  --r-veld:.7rem;      /* inputs/selects (branches) */
  --r-ui:10px;         /* momenten: knoppen/velden/kaarten */
  --r-kader:0px;       /* momenten: printkaders — prints zijn rechthoeken */

  /* merk-sterren: de vijf branchekleuren (poort-hemel + Producten-dropdowns) */
  --ster-kind:#D8A981;
  --ster-liefde:#C4838B;
  --ster-gezin:#9FAF7E;
  --ster-vriendschap:#8FB2C2;
  --ster-momenten:#9D8AC7;
  --ster-morgenster:#C98860;

  /* PRODUCT-kleuren — het ene nachtmoment (sterrenkaart/prints ín het werk).
     NOOIT als UI-kleur gebruiken; de test bewaakt dit. */
  --night:#0B0C14;
  --night-2:#131523;
  --gold:#D4AA5A;
  --gold-licht:#E3C88F;
}

/* ── KIND — "Zachte Cartografie · speels": zand, ivoor en klei ─────────────── */
[data-niche="kind"]{
  --field-top:#F7EEDE; --field-mid:#EADFC9; --field-bot:#D3C6B1;
  --surface:#FCF8F2; --surface-alt:#F5EFE4; --surface-input:#fff;
  --ink:#3E362D; --ink-soft:#736A5E;
  --ondark:#3E362D;                    /* het veld is licht: tekst-op-veld = inkt */
  --accent:#BA7E5F; --accent-deep:#925F47;
  --halo:#DDCEB3; --rule:#E4DAC8;
  --deco1:#925F47; --deco2:#6F8364; --deco3:#B88E4C; --deco4:#76929D;
  --fout:#B0483C;
}

/* ── LIEFDE — het blauwe uur: wijnveld, roos en diepe bes ──────────────────── */
[data-niche="liefde"]{
  --field-top:#3B2230; --field-bot:#241521;
  --surface:#FBF6F1; --surface-alt:#F6EEE7; --surface-input:#fff;
  --ink:#362A2E; --ink-soft:#7A6A6E;
  --ondark:#F2E5DC;
  --accent:#C4838B; --accent-deep:#7E3B4B;
  --halo:#E8D3D2; --rule:#EBDDD8;
  --deco1:#C9A257; --deco2:#C4838B; --deco3:#C9A257;
  --fout:#B0483C; --fout-ondark:#F0B5A9;
}

/* ── GEZIN — geworteld: mos, honing en terracotta ──────────────────────────── */
[data-niche="gezin"]{
  --field-top:#EEF0E4; --field-bot:#CBD2B8;
  --surface:#FBFAF3; --surface-alt:#F4F2E6; --surface-input:#fff;
  /* ink-soft: 1/255 donkerder dan de referentie-styleguide (#75765F) om
     WCAG AA (≥4,5:1 op --surface) te halen — visueel niet waarneembaar */
  --ink:#3A392C; --ink-soft:#74755E;
  --ondark:#3A392C;
  --accent:#8A9668; --accent-deep:#5E6B45;
  --halo:#DDE2C8; --rule:#E4E4D2;
  --deco1:#5E6B45; --deco2:#B88E4C; --deco3:#A66A4F;
  --fout:#B0483C;
}

/* ── VRIENDSCHAP — licht: schemerblauw, petrol en honing ───────────────────── */
[data-niche="vriendschap"]{
  --field-top:#E7EEF2; --field-bot:#BFD0DA;
  --surface:#F9FAF9; --surface-alt:#EFF3F4; --surface-input:#fff;
  /* ink-soft: 3/255 donkerder dan de referentie-styleguide (#68797F) om
     WCAG AA (≥4,5:1 op --surface) te halen — visueel niet waarneembaar */
  --ink:#2E3A40; --ink-soft:#65767C;
  --ondark:#2E3A40;
  --accent:#7FA1B0; --accent-deep:#4A6B7C;
  --halo:#D3E0E6; --rule:#DDE5E7;
  --deco1:#4A6B7C; --deco2:#C29A4E; --deco3:#B96A55;
  --fout:#B0483C;
}

/* ── MOMENTEN — het observatorium na sluitingstijd (nachtskin v2) ──────────
   veld = violetnacht-wand · surface = maanivoor passe-partout · accent =
   amethist (het enige UI-accent). Goud alleen ín het product (--gold). ────── */
[data-niche="momenten"]{
  --field-top:#241F38; --field-bot:#151226;
  --surface:#F1EDE3; --surface-input:#FAF7EF; --surface-hover:#EFE9DB;
  --surface-dropdown:#fff;            /* zwevend paneel boven het papier */
  --ink:#3A3253; --ink-soft:#6F6785;
  --ondark:#D9D3E4; --ondark-soft:#A79FC0;
  --accent:#9D8AC7; --accent-deep:#6B5B96;
  --accent-tekst:#1E1933;             /* tekst óp een amethist-vlak (hover) */
  --halo:#E7E1D2;                     /* paneel-hover op papier */
  --rule:#DAD2C2;                     /* hairline op papier */
  --rule-ondark:#453D63;              /* hairline op de wand */
  --fout:#A2543F;
}

/* ── MORGENSTER — de scheurkalender: het uur vóór zonsopkomst. Nachtblauw dat
   net begint te kleuren als wand; ochtendivoor (het kalenderblaadje) als
   papier; dageraad-koper als accent. */
[data-niche="morgenster"]{
  --field-top:#26304A; --field-bot:#161C2E;
  --surface:#FBF6EC; --surface-input:#FFFDF7; --surface-hover:#F4EDDD;
  --surface-dropdown:#fff;            /* zwevend paneel boven het papier */
  --ink:#3B352C; --ink-soft:#6E6759;
  --ondark:#DFE5F0; --ondark-soft:#AAB4CC;
  --accent:#C98860; --accent-deep:#8F4F2E;
  --accent-tekst:#241207;             /* tekst óp een koper-vlak (hover) */
  --halo:#F0E7D2;                     /* paneel-hover op papier */
  --rule:#E2D9C6;                     /* hairline op papier */
  --rule-ondark:#3B455F;              /* hairline op de wand */
  --fout:#A2543F;
}

/* ── POORT — de paraplu, geen niche: hier mag de hemel zelf het decor zijn.
   Bewuste uitzondering op de goud-regel (gedocumenteerd in design/README.md). */
[data-niche="poort"]{
  --dusk-top:#2B2138; --dusk-bot:#12101C; --dusk-diep:#171422;
  --ivory:#FCF8F2; --ivory-soft:rgba(252,248,242,.72);
  --gold-soft:#B99657; --hairline:rgba(212,170,90,.22);
  --paneel:#1C1727;
  --nevel-1:#4A3354; --nevel-2:#38294B;
  --ster-wit:#E9E2F2; --ster-warm:#F0DDB0;
}