/* =========================================================================
   ZWARTBAERD — TOKENS

   Source of truth: ZWARTBAERD DESIGN SYSTEM v1.2 — see DESIGN-SYSTEM-v1.md
   Chapter 15 (Design Tokens). Chapter references throughout this codebase
   point at that document; the twelve volumes it consolidates are retired.

   Nothing here is new.

   This file contains custom properties only. No layout, no components,
   no selectors beyond the four ground contexts and four lighting states
   that the tokens themselves require.

   Load order: tokens.css → base.css → chrome.css → frontispiece.css →
                 components.css → voorrede.css → sections.css
                 (see Design System Ch. 17.10)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · PRIMITIVES                                            Vol. I §3.2
   Raw values. Never consumed directly by a component.
   ------------------------------------------------------------------------- */

:root {
  /* Grounds */
  --ground-parchment: #E4D8BE;
  --ground-vellum:    #EFE6D2;
  --ground-foxed:     #CBB790;
  --ground-oak:       #3A2C21;
  --ground-ebony:     #191310;

  /* Inks */
  --ink-iron:         #241B14;
  --ink-faded:        #5C4B3B;
  --ink-chalk:        #E8DFCB;

  /* Metal */
  --brass:            #A8843C;
  --brass-lit:        #D6B36A;
  --brass-tarnish:    #6B5326;

  /* Rare accents — rationed per Vol. I §3.4 */
  --delft:            #1F3A63;
  --delft-wash:       #5A789C;
  --sealing-wax:      #7A2A22;
  --verdigris:        #4F6B60;   /* reserved — no homepage instance */
  --candle:           #F2C879;   /* light only. never a fill, never text */

  /* Shadow base — warm brown. never grey, never blue */
  --shadow-ink:       30 20 14;
}


/* -------------------------------------------------------------------------
   2 · LIGHTING STATES                                      Vol. XI §3.2
   Set once on load from the device clock. No transition. No re-evaluation
   while the visitor reads. No geolocation, no network request.

   Ochtend 05:00–10:59 · Dag 11:00–16:59 · Avond 17:00–21:59 · Nacht 22:00–04:59
   ------------------------------------------------------------------------- */

:root,
[data-light="dag"] {
  --wash-color:        transparent;
  --wash-alpha:        0%;
  --vignette-alpha:    0.14;
  --foxing-alpha:      0.05;
  --brass-sheen-alpha: 0.10;
  --flicker-play:      paused;
  --grade:             candle;   /* informational; read by js/light.js */
}

[data-light="ochtend"] {
  --wash-color:        #BFD2E0;
  --wash-alpha:        2.5%;
  --vignette-alpha:    0.10;
  --foxing-alpha:      0.04;
  --brass-sheen-alpha: 0.06;
  --flicker-play:      paused;
}

[data-light="avond"] {
  --wash-color:        #F2C879;
  --wash-alpha:        2%;
  --vignette-alpha:    0.19;
  --foxing-alpha:      0.06;
  --brass-sheen-alpha: 0.16;
  --flicker-play:      running;
}

[data-light="nacht"] {
  --wash-color:        #F2C879;
  --wash-alpha:        3%;
  --vignette-alpha:    0.23;
  --foxing-alpha:      0.06;
  --brass-sheen-alpha: 0.20;
  --flicker-play:      running;
}

/* Grounds as rendered. Light grounds receive no wash — this is what
   protects the 12:1 body contrast absolutely.                Vol. XI §3.3 */
:root {
  --oak-lit:   #3A2C21;
  --ebony-lit: #191310;
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --oak-lit:   color-mix(in srgb, var(--ground-oak),   var(--wash-color) var(--wash-alpha));
    --ebony-lit: color-mix(in srgb, var(--ground-ebony), var(--wash-color) var(--wash-alpha));
  }
}

/* Verification / no-color-mix fallback.                Design System Ch. 7.4
   These are the exact outputs of the color-mix() above, so the two code
   paths render identically. Corrected in v1.2: the previous values were
   hand-estimated and diverged from the computed path by up to 3 levels.
   Ochtend  oak #3D3026  ebony #1D1815
   Dag      oak #3A2C21  ebony #191310
   Avond    oak #3E2F23  ebony #1D1712
   Nacht    oak #403124  ebony #201813                                      */
@supports not (color: color-mix(in srgb, red, blue)) {
  [data-light="ochtend"] { --oak-lit: #3D3026; --ebony-lit: #1D1815; }
  [data-light="avond"]   { --oak-lit: #3E2F23; --ebony-lit: #1D1712; }
  [data-light="nacht"]   { --oak-lit: #403124; --ebony-lit: #201813; }
}


/* -------------------------------------------------------------------------
   3 · GROUND CONTEXTS                                       Vol. XI §3.4
   The architectural spine. Set the ground; correct text, accent, rule and
   rhumb follow. The A5 brass correction is enforced here, not remembered.
   ------------------------------------------------------------------------- */

[data-ground="parchment"] {
  --surface-inset: var(--ground-vellum);
  --surface:     var(--ground-parchment);
  --text:        var(--ink-iron);
  --text-quiet:  var(--ink-faded);
  --accent:      var(--brass);
  --label:       var(--ink-faded);
  --rule:        var(--ground-foxed);
  --rhumb:       rgb(31 58 99 / .55);
  --plate-light: rgb(255 246 224 / .22);
  --plate-shade: rgb(30 20 14 / .20);
}

[data-ground="vellum"] {
  --surface-inset: var(--ground-vellum);
  --surface:     var(--ground-vellum);
  --text:        var(--ink-iron);
  --text-quiet:  var(--ink-faded);
  --accent:      var(--brass);
  --label:       var(--ink-faded);
  --rule:        var(--ground-foxed);
  --rhumb:       rgb(31 58 99 / .55);
  --plate-light: rgb(255 246 224 / .26);
  --plate-shade: rgb(30 20 14 / .18);
}

[data-ground="oak"] {
  --surface-inset: var(--ground-vellum);
  --surface:     var(--oak-lit);
  --text:        var(--ink-chalk);
  --text-quiet:  rgb(232 223 203 / .85);
  --accent:      var(--brass-lit);   /* A5 — brass on oak is 3.7:1 and fails */
  --label:       var(--brass-lit);
  --rule:        rgb(232 223 203 / .25);
  --rhumb:       rgb(90 120 156 / .45);
  --plate-light: rgb(255 246 224 / .18);
  --plate-shade: rgb(0 0 0 / .28);
}

[data-ground="ebony"] {
  --surface-inset: var(--ground-oak);
  --surface:     var(--ebony-lit);
  --text:        var(--ink-chalk);
  --text-quiet:  rgb(232 223 203 / .80);
  --accent:      var(--brass);
  --label:       var(--brass);
  --rule:        rgb(232 223 203 / .22);
  --rhumb:       rgb(90 120 156 / .45);
  --plate-light: rgb(255 246 224 / .18);
  --plate-shade: rgb(0 0 0 / .32);
}

/* --accent is never applied to running text on any ground.
   On parchment it computes to 2.5:1.                        Vol. XI §3.4 */


/* -------------------------------------------------------------------------
   4 · TYPOGRAPHY                                             Vol. XI §4
   ------------------------------------------------------------------------- */

:root {
  --face-display: "EB Garamond", "EB Garamond Fallback", "Sorts Mill Goudy", Garamond, Georgia, serif;
  --face-text:    Spectral, "Spectral Fallback", "Iowan Old Style", Georgia, serif;

  /* Fluid scale — interpolated 375px → 1400px, fixed outside          §4.2 */
  --t-wordmark:  clamp(2.5rem,    1.6768rem + 3.5122vw, 4.75rem);   /* 40 → 76 */
  --t-title:     clamp(2rem,      1.5427rem + 1.9512vw, 3.25rem);   /* 32 → 52 */
  --t-section:   clamp(1.5625rem, 1.3567rem + 0.878vw,  2.125rem);  /* 25 → 34 */
  --t-subhead:   clamp(1.3125rem, 1.221rem  + 0.3902vw, 1.5625rem); /* 21 → 25 */
  --t-longform:  clamp(1.125rem,  1.0564rem + 0.2927vw, 1.3125rem); /* 18 → 21 */
  --t-body:      clamp(1.125rem,  1.1021rem + 0.0976vw, 1.1875rem); /* 18 → 19 */
  --t-caption:   clamp(0.9375rem, 0.9146rem + 0.0976vw, 1rem);      /* 15 → 16 */
  --t-marginal:  clamp(0.875rem,  0.8521rem + 0.0976vw, 0.9375rem); /* 14 → 15 */
  --t-label:     0.8125rem;  /* 13 — fixed. at its legibility floor already */

  /* Line heights — optical, per Vol. XI C1                            §4.3 */
  --lh-wordmark: 1.0;
  --lh-title:    1.154;
  --lh-section:  1.294;
  --lh-subhead:  1.36;
  --lh-longform: 1.619;
  --lh-body:     1.5;
  --lh-caption:  1.625;
  --lh-label:    1.538;

  /* Tracking                                                          §4.4 */
  --tr-wordmark:  0.22em;   /* display letterspacing, not optical */
  --tr-title:    -0.02em;
  --tr-section:  -0.01em;
  --tr-name:      0.10em;
  --tr-smallcap:  0.14em;
  --tr-body:      0;

  /* Features — the fragile rule, encoded                              §4.5
     Vol. IV §18 named this the detail most likely to be lost in build.
     A pull request setting font-feature-settings inline rather than using
     one of these should be rejected on sight.                             */
  --num-prose:   "onum" 1, "liga" 1, "kern" 1;
  --num-tabular: "lnum" 1, "tnum" 1, "kern" 1;
  --smallcaps:   "smcp" 1, "c2sc" 1, "onum" 1;

  /* Measure                                                           §4.6 */
  --measure-body:     68ch;
  --measure-longform: 58ch;
}

@media (max-width: 43.6875rem) {
  :root { --tr-wordmark: 0.18em; }  /* +0.22em overflows 335px */
}


/* -------------------------------------------------------------------------
   5 · SPACING AND LAYOUT                                     Vol. XI §5
   The 4px scale is the enforceable system. Body copy sits on a 28px
   rhythm; headings use optical line-heights and do not snap to it.
   ------------------------------------------------------------------------- */

:root {
  --sp-1:  0.25rem;   /*   4 */
  --sp-2:  0.5rem;    /*   8 */
  --sp-3:  0.75rem;   /*  12 */
  --sp-4:  1rem;      /*  16 */
  --sp-5:  1.5rem;    /*  24 */
  --sp-6:  2rem;      /*  32 */
  --sp-7:  3rem;      /*  48 */
  --sp-8:  4.5rem;    /*  72 */
  --sp-9:  7rem;      /* 112 — inter-section, mobile */
  --sp-10: 10.5rem;   /* 168 — inter-section, desktop */
  --sp-11: 14rem;     /* 224 — frontispiece breathing room */

  --baseline: 1.75rem; /* 28 */

  /* Grid — breakpoints 480 / 700 / 1024 / 1400, named for content        */
  --sheet-max:   73.75rem;  /* 1180 */
  --page-margin: 1.25rem;   /*   20 */
  --gutter:      1rem;      /*   16 */
  --columns:     4;

  /* Section rhythm — asymmetric, more below than above                  */
  --section-gap:   var(--sp-9);
  --section-pad-t: var(--sp-8);
  --section-pad-b: calc(var(--sp-8) * 1.5);
}

@media (min-width: 43.75rem) {
  :root { --gutter: 1.25rem; --columns: 8; }
}

@media (min-width: 64rem) {
  :root {
    --gutter: 1.5rem;
    --columns: 12;
    --section-gap: var(--sp-10);
  }
}


/* -------------------------------------------------------------------------
   6 · MOTION                                                 Vol. XI §6
   No easing value exceeds 1 or falls below 0. No spring, no bounce,
   no overshoot, anywhere, ever.
   ------------------------------------------------------------------------- */

:root {
  --motion-press: 90ms  cubic-bezier(.4,0,.6,1);
  --motion-ink:   240ms cubic-bezier(.25,.1,.25,1);
  --motion-fold:  300ms cubic-bezier(.32,.08,.24,1);
  --motion-page:  420ms cubic-bezier(.4,0,.2,1);
  --motion-seal:  340ms cubic-bezier(.34,.4,.2,1);

  --draw-coast:     900ms;   /* Pl. I, once */
  --draw-annotate:  700ms;   /* the hand, once */
  --seq-razor-step: 120ms;   /* × 7 = 1020ms */
  --nav-return:     200ms;
}


/* -------------------------------------------------------------------------
   7 · LIGHT, SHADOW, RELIEF                                  Vol. XI §7
   One source, upper left, 40°. --light-origin drives every vignette,
   so moving the candle is a single change.
   ------------------------------------------------------------------------- */

:root {
  --light-origin-x: 38%;
  --light-origin-y: 24%;

  --shade-contact: 1px 1px 0 rgb(var(--shadow-ink) / .18);
  --shade-rest:    2px 3px 6px rgb(var(--shadow-ink) / .16);
  --shade-press:   inset 1px 1px 2px rgb(var(--shadow-ink) / .28);
  --emboss:        inset 1px 1px 0 rgb(255 246 224 / .22),
                   inset -1px -1px 0 rgb(var(--shadow-ink) / .20);
  --emboss-deep:   inset 2px 2px 0 rgb(255 246 224 / .26),
                   inset -2px -2px 0 rgb(var(--shadow-ink) / .26);

  --blur-max: 8px;

  --plate-gap:    0.5rem;
  --plate-radius: 2px;   /* the only radius on the site */
}


/* -------------------------------------------------------------------------
   8 · TEXTURE                                                Vol. XI §8
   Grayscale luminance maps, multiply. The token hex is therefore the
   surface's HIGHLIGHT value — which is why every contrast figure in
   Vol. XI §3.5 remains a true worst case with textures on.
   ------------------------------------------------------------------------- */

:root {
  --tex-laid-fibre: url("../assets/tex/placeholder-laid-fibre.svg");
  --tex-foxing-a:   url("../assets/tex/placeholder-foxing-a.svg");
  --tex-foxing-b:   url("../assets/tex/placeholder-foxing-b.svg");
  --tex-foxing-c:   url("../assets/tex/placeholder-foxing-c.svg");
  --tex-tide:       url("../assets/tex/placeholder-tide.svg");
  --tex-wood:       url("../assets/tex/placeholder-wood.svg");
  --tex-brass:      url("../assets/tex/placeholder-brass.svg");
  --tex-wax:        url("../assets/tex/placeholder-wax.svg");

  --tex-blend:      multiply;

  --alpha-laid:     0.035;
  --alpha-foxing:   var(--foxing-alpha);  /* the only state-variable texture */
  --alpha-tide:     0.03;
  --alpha-wood-oak: 0.05;
  --alpha-wood-eb:  0.03;
  --alpha-brass:    0.08;
  --alpha-wax:      0.12;

  --tile-laid: 47rem;  /* 752 */
  --tile-wood: 48rem;  /* 768 */
}

@media (max-width: 43.6875rem) {
  :root { --tile-wood: 36rem; --tile-laid: 35.25rem; }  /* 0.75× */
}


/* -------------------------------------------------------------------------
   9 · RULES, FIELDS, FOCUS                                   Vol. XI §9
   ------------------------------------------------------------------------- */

:root {
  --rule-hairline: 1px;
  --rule-heavy:    3px;
  --rule-gap:      3px;

  --field-rule:       1px solid var(--text-quiet);
  --field-rule-focus: 2px solid var(--delft);
  --field-rule-error: 2px solid var(--sealing-wax);
  --field-height:     3rem;
  --field-height-sm:  3.25rem;

  --focus-ring:   2px solid var(--brass-lit);
  --focus-offset: 3px;
  --focus-edge:   1px solid var(--ink-iron);

  --tap-min: 2.75rem;  /* 44 */
}

@media (min-resolution: 2dppx) {
  :root { --rule-hairline: 0.5px; }
}


/* -------------------------------------------------------------------------
   10 · COMPONENT SEMANTICS                                  Vol. XI §10
   Not components. The tokens components will consume.
   ------------------------------------------------------------------------- */

:root {
  --btn-brass-face:    var(--brass);
  --btn-brass-keyline: var(--brass-tarnish);
  --btn-brass-text:    var(--ink-iron);
  --btn-brass-press:   var(--brass-tarnish);
  --btn-height:        3.5rem;

  --btn-rule-keyline:  var(--text);
  --btn-rule-text:     var(--text);

  --link-color:     var(--accent);
  --link-underline: 1px;
  --link-offset:    3px;

  --seal-face:    var(--sealing-wax);
  --seal-size:    11.25rem;
  --seal-size-sm: 8.75rem;

  --foliation-alpha:        0.4;
  --foliation-alpha-active: 0.7;

  /* Chrome */
  --nav-height:    5.25rem;  /* 84 desktop */
  --nav-height-sm: 4rem;     /* 64 mobile */
}


/* -------------------------------------------------------------------------
   11 · PREFERENCE OVERRIDES                                 Vol. XI §11
   Reduced motion REMOVES the sequences rather than shortening them.
   Increased contrast forces Dag, drops all texture and all vignetting.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-press: 0ms; --motion-ink: 0ms; --motion-fold: 0ms;
    --motion-page:  0ms; --motion-seal: 0ms;
    --draw-coast:   0ms; --draw-annotate: 0ms; --seq-razor-step: 0ms;
    --nav-return:   0ms;
    --flicker-play: paused;
  }
}

@media (prefers-contrast: more) {
  :root {
    --wash-alpha: 0%;
    --vignette-alpha: 0;
    --alpha-laid: 0; --alpha-foxing: 0; --alpha-tide: 0;
    --alpha-wood-oak: 0; --alpha-wood-eb: 0;
    --alpha-brass: 0; --alpha-wax: 0;
    --flicker-play: paused;
    --oak-lit:   var(--ground-oak);
    --ebony-lit: var(--ground-ebony);
  }
}

@media (prefers-reduced-data: reduce) {
  :root {
    --tex-foxing-a: none; --tex-foxing-b: none; --tex-foxing-c: none;
    --tex-tide: none; --tex-brass: none; --tex-wax: none;
    --tex-laid-fibre: none;   /* the SVG line pattern is retained */
  }
}

@media (forced-colors: active) {
  :root {
    --alpha-laid: 0; --alpha-foxing: 0; --alpha-tide: 0;
    --alpha-wood-oak: 0; --alpha-wood-eb: 0;
    --alpha-brass: 0; --alpha-wax: 0;
    --vignette-alpha: 0;
  }
}