/* ============================================================
   TUMMI — Design System Foundations (v5 · Zeegloed)
   Herbarium na zonsopgang: dezelfde diepblauwe inkt, maar de
   horizon heeft warm licht gevangen. Goud stijgt op uit koraal,
   gedragen door blooms achter het glas.

   Identity: "Alles landt zacht, niets veert. Het warme licht
   komt van achter het glas, nooit op de letters."

   Sky physics -> palette: zenith indigo -> gold band -> coral
   horizon -> vermilion sun edge, on warm-sand paper.
   Tier law (unchanged): -wash ground · -soft decorative ·
   -tint gradient stop · base = graphics/large only · -mark 3:1
   non-text · -deep 4.5:1 body. Full contract: ./SPEC.md,
   computed ratios: ./qa/contrast.mjs (the CI gate).
   ============================================================ */

/* ---------- Self-hosted variable fonts (../fonts, synced) ----------
   WOFF2 first (≈45-60% smaller than the raw TTFs), TTF fallback. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces.woff2") format("woff2-variations"),
       url("../fonts/Fraunces.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Italic.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-Italic.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "InterTight";
  src: url("../fonts/InterTight.woff2") format("woff2-variations"),
       url("../fonts/InterTight.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono.woff2") format("woff2-variations"),
       url("../fonts/JetBrainsMono.ttf") format("truetype-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* ============ INK — the zenith blue (no pure black, ever) ============ */
  --ink:         #182338;   /* 14.38 on paper · primary text, the dark plate floor */
  --ink-soft:    #3E4A63;   /* 8.13 · secondary, control numerals */
  --ink-muted:   #556074;   /* 5.80 · captions, help; floor for informational text */
  --ink-faint:   #98A0B2;   /* NON-TEXT ONLY: disabled glyphs, ornaments */
  --ink-inverse: #F4EEE1;   /* text on dark plates; warm cream, never #FFF */
  --ink-wash:    #E9EBF1;   /* energie/focus chip ground (neutral-cool) */

  /* ============ PAPER — morning sand the light lands on ============ */
  --paper:     #FBF4E9;   /* page base (ink 14.38) */
  --paper-alt: #F4EAD8;   /* section bands, zebra (ink 13.18) */
  --card:      #FFFCF6;   /* raised plate, brightest (ink 15.35) */
  --sink:      #F0E6D6;   /* carved wells (ink 12.72) */
  --raise:     #FFFDF9;   /* raised chip stock */
  --hairline:        #E8DDCB;
  --hairline-strong: #D8CBB4;
  --hairline-warm:   #DCC49A;   /* the premium gold detail line */

  /* ============ THE SUNRISE BAND — vivid warm accents ============ */
  --gold-wash: #FBEBCB;  --gold-soft: #F6D896;  --gold-tint: #F4C25E;
  --gold:      #F2B44C;  /* luminous: bloom core, fills, rings — never small text */
  --gold-mark: #B87F16;  /* 3.16 · icons, strokes, dots */
  --gold-deep: #7A5410;  /* 6.19 body · 5.75 on wash */
  --gold-text: var(--gold-deep);

  --amber-wash: #FBE6C8;  --amber-soft: #F4BE7C;  --amber-tint: #F0A64E;
  --amber:      #F0932E;
  --amber-mark: #CA7818;  /* 3.09 */
  --amber-deep: #8A4A16;  /* 6.26 body · 5.62 on wash */
  --amber-text: var(--amber-deep);

  --apricot-wash: #FCE7D8;  --apricot-soft: #F6C09A;  --apricot-tint: #F2A374;
  --apricot:      #EE9A57;  /* the gold->coral rung */
  --apricot-mark: #C05F2E;  /* 3.91 */
  --apricot-deep: #8F4520;  /* 6.32 body */

  --coral-wash: #FBE0D6;  --coral-soft: #F3B3A6;  --coral-tint: #F0684A;
  --coral:      #F0684A;  /* luminous: the horizon line, today, the glow */
  --coral-mark: #DA5E42;  /* 3.40 · today marker, spark dots */
  --coral-deep: #A83A2E;  /* 5.81 body */
  --coral-text: #9A3428;  /* 5.78 on coral-wash */

  --vermilion:      #E23A1C;  /* the sun's edge — decorative glints + CTA ONLY,
                                 structurally barred from health data */
  --vermilion-deep: #B22B22;  /* 5.89 · the one loud text tier, sparing */

  --raspberry-wash: #F7E3E7;  --raspberry-soft: #EFB9C2;  --raspberry-tint: #DA7488;
  --raspberry-mark: #B23A4E;  /* 5.33 · maatstreep context, wordmark stop */
  --raspberry-deep: #7E2A3C;  /* 8.42 · flare-word text, italic aside */

  --sky-wash: #E4EBF6;  --sky-soft: #B9C8E6;  --sky-tint: #6E8FCE;
  --sky:      #3E68C4;  /* the cool counter-pole: vocht/adem/slaap */
  --sky-mark: #2E4A8C;  /* 7.77 */
  --sky-deep: #2E4374;  /* 8.85 body · 8.07 on wash */
  --sky-text: var(--sky-deep);

  --sage-wash: #E7EDE2;  --sage-soft: #CBD9C0;  --sage-tint: #8AA875;
  --sage:      #8AA875;  /* health-positive: balans */
  --sage-mark: #5B7A4E;  /* 4.43 · bars, evidence dots */
  --sage-deep: #47593F;  /* 6.94 body · 6.36 on wash */
  --sage-text: var(--sage-deep);

  --done:  #C29A85;   /* receded past days; always with an ink-tier numeral */
  --today: var(--coral);

  /* ============ CTA — the sunrise into oxblood ============ */
  --cta-ink:    #182338;   /* ink on dawn-wash pastels: 12.6 / 11.6, every stop */
  --cta-border: rgba(218, 116, 136, .55);
  --cta-sheen:  inset 0 1px 1px rgba(255,255,255,.55);
  --cta-shade:  inset 0 -3px 6px rgba(218, 116, 136, .10);
  --cta-shadow: 0 1px 3px hsla(28, 45%, 45%, .10), 0 10px 24px -12px rgba(242, 180, 76, .5);

  /* ============ THE GRADIENT LIBRARY (see SPEC §3, six laws) ============ */
  /* Hero bloom: the sea-sky as a radial mesh (3 light sources, never 1 stripe) */
  --grad-dageraad:
    radial-gradient(120% 90% at 78% 8%,   rgba(62,104,196,.34) 0%, transparent 46%),
    radial-gradient(90% 70% at 20% 42%,   rgba(242,180,76,.36) 0%, transparent 52%),
    radial-gradient(130% 95% at 55% 108%, rgba(240,104,74,.38) 0%, transparent 58%),
    var(--paper);
  /* Single sky stripe, SOFTENED v5.1: 4 stops, cerulean spike and vermilion
     tail removed, everything a notch toward the ink. Deck cover + theme edge
     ONLY. oklch keeps the navy->gold leg smooth (sRGB grays to mud). */
  --grad-morgenrood: linear-gradient(180deg, #1E2A44 0%, #3A4E82 34%, #E9B866 68%, #E67E5E 100%);
  --grad-morgenrood: linear-gradient(180deg in oklch, #1E2A44 0%, #3A4E82 34%, #E9B866 68%, #E67E5E 100%);
  /* Section atmosphere: barely-there horizon wash; ink stays >= 12:1 */
  --grad-section: linear-gradient(178deg, var(--paper) 0%, #FBEEDA 60%, #FBE7DC 100%);
  /* Blooms (radial light) */
  --bloom-morning: radial-gradient(120% 120% at 30% 20%, #F4C25E 0%, #F0684A 34%, rgba(240,104,74,0) 68%);
  --bloom-vitaal:  radial-gradient(130% 130% at 25% 15%, #F6D896 0%, #C4CE9C 42%, #8AA875 74%, rgba(138,168,117,0) 100%);
  --bloom-nachtzee:
    radial-gradient(120% 90% at 80% 10%, rgba(46,74,140,.5) 0%, transparent 50%),
    radial-gradient(120% 100% at 40% 110%, rgba(240,104,74,.35) 0%, transparent 55%),
    #0C1428;
  /* Fills + sweeps */
  /* v5.3 (Julia, 2026-07-11): the CTA is DAUW — a light dawn-wash pill
     (gold-wash into rose-wash) with ink, wearing the zonlijn as a ring.
     Every saturated red-family fill retired: to Julia both oxblood and
     berry read "rood". The warmth is the ring and the glow, never the
     fill. Cream on these pastels fails hard (1.2, the qa proof-FAIL),
     which is why the label is ink. */
  --grad-cta:       linear-gradient(135deg, #FBEBCB 0%, #FAE7DA 55%, #F7E3E7 100%);
  --grad-cta:       linear-gradient(135deg in oklch, #FBEBCB 0%, #FAE7DA 55%, #F7E3E7 100%);
  --grad-cta-hover: linear-gradient(135deg, #FBEDD2 0%, #FAE9DE 55%, #F8E7EA 100%);
  --grad-cta-hover: linear-gradient(135deg in oklch, #FBEDD2 0%, #FAE9DE 55%, #F8E7EA 100%);
  /* v5.1: the rainbow retires. One warm adjacent sweep, built from palette
     vars so it self-adapts to dark. Non-text, forever. */
  --grad-horizon: linear-gradient(90deg, var(--gold-tint) 0%, var(--apricot) 52%, var(--coral) 100%);
  --grad-horizon: linear-gradient(90deg in oklch, var(--gold-tint) 0%, var(--apricot) 52%, var(--coral) 100%);
  /* v5.1: demoted to decorative ornament (spinner ring, .halo) — NEVER
     behind a value, arc or numeral. Warm 3-hue, no full-circle rainbow. */
  --grad-conic: conic-gradient(from 200deg, var(--gold-tint), var(--apricot), var(--coral));
  --grad-conic: conic-gradient(from 200deg in oklch, var(--gold-tint), var(--apricot), var(--coral));
  /* THE DOMAIN FILLS — one calm hue per data surface; variety lives in the
     family, never inside one sweep. Palette vars: dark adapts for free. */
  --fill-gold:    linear-gradient(90deg in oklch, var(--gold-soft)      0%, var(--gold-tint)      100%);
  --fill-amber:   linear-gradient(90deg in oklch, var(--amber-soft)     0%, var(--amber-tint)     100%);
  --fill-apricot: linear-gradient(90deg in oklch, var(--apricot-soft)   0%, var(--apricot-tint)   100%);
  --fill-coral:   linear-gradient(90deg in oklch, var(--coral-soft)     0%, var(--coral-tint)     100%);
  --fill-sky:     linear-gradient(90deg in oklch, var(--sky-soft)       0%, var(--sky-tint)       100%);
  --fill-sage:    linear-gradient(90deg in oklch, var(--sage-soft)      0%, var(--sage-tint)      100%);
  --fill-rasp:    linear-gradient(90deg in oklch, var(--raspberry-soft) 0%, var(--raspberry-tint) 100%);
  --fill-default: var(--grad-horizon);
  --grad-tint: radial-gradient(140% 120% at 100% 0%, rgba(242,180,76,.10), rgba(240,104,74,.05) 40%, transparent 70%);

  /* ============ VIVID BLOOMS (v5.1, Eyro grammar, Zeegloed hues) ============
     Pearly diffuse zone of the card's OWN hue dissolving into ONE luminous
     end. Unblurred, opaque, no grain. Mode-agnostic. Health data NEVER sits
     on a bloom. Text rides --vivid-textbed, never naked cream (2.66-2.68). */
  --bloom-vivid-gold:    radial-gradient(78% 62% at 24% 8%, rgba(251,235,203,.82) 0%, rgba(251,235,203,0) 55%), linear-gradient(150deg, #F6D896 0%, #F4C25E 45%, #F2B44C 100%);
  --bloom-vivid-amber:   radial-gradient(80% 60% at 25% 8%, rgba(251,230,200,.78) 0%, rgba(251,230,200,0) 55%), linear-gradient(152deg, #F4BE7C 0%, #F0A64E 45%, #F0932E 100%);
  --bloom-vivid-apricot: radial-gradient(82% 58% at 28% 8%, rgba(252,231,216,.80) 0%, rgba(252,231,216,0) 55%), linear-gradient(158deg, #F6C09A 0%, #F2A374 44%, #EE9A57 100%);
  --bloom-vivid-coral:   radial-gradient(80% 60% at 30% 8%, rgba(251,224,214,.78) 0%, rgba(251,224,214,0) 55%), linear-gradient(162deg, #F3B3A6 0%, #F08A6E 45%, #F0684A 100%);
  --bloom-vivid-rose:    radial-gradient(80% 60% at 30% 8%, rgba(247,227,231,.80) 0%, rgba(247,227,231,0) 55%), linear-gradient(165deg, #EFB9C2 0%, #DA7488 46%, #C64F68 100%);
  --bloom-vivid-sage:    radial-gradient(78% 58% at 26% 8%, rgba(231,237,226,.74) 0%, rgba(231,237,226,0) 55%), linear-gradient(168deg, #CBD9C0 0%, #A6C295 44%, #8AA875 100%);
  --bloom-vivid-sky:     radial-gradient(80% 60% at 28% 8%, rgba(228,235,246,.78) 0%, rgba(228,235,246,0) 55%), linear-gradient(166deg, #B9C8E6 0%, #6E8FCE 46%, #3E68C4 100%);
  --vivid-textbed: rgba(12,20,40,.55);   /* the universal dark bed under text on any vivid bloom */

  /* ============ HERO BLOOMS (v5.1) ============
     The inverse: the ONE real nachtzee void at the core, one hue blooming
     from the rim. Cream metadata stays 15.85:1 on every core. No vermilion
     (fenced). One hero bloom per screen; never behind health readouts. */
  --bloom-hero-coral: radial-gradient(108% 98% at 44% 46%, #0C1428 0%, #241326 20%, #5A241E 42%, #A8402A 64%, #E8683C 84%, #F6A05E 100%);
  --bloom-hero-sky:   radial-gradient(105% 150% at 50% 44%, #0C1428 0%, #14203E 28%, #223564 54%, #34519A 78%, #5A80CE 100%);
  --bloom-hero-rose:  radial-gradient(105% 95% at 48% 40%, #0C1428 0%, #2A1030 20%, #5E1E4A 42%, #9A3462 64%, #D45E86 84%, #EFA0BE 100%);
  --bloom-hero-sage:  radial-gradient(108% 100% at 46% 44%, #0C1428 0%, #12241E 22%, #24422E 46%, #3E6A4A 68%, #6A9A6A 86%, #A6C295 100%);
  --glow-hero-coral: radial-gradient(94% 42% at 60% 112%, rgba(246,160,94,.62) 0%, rgba(246,160,94,0) 62%), radial-gradient(60% 36% at 102% -4%, rgba(240,104,74,.42) 0%, rgba(240,104,74,0) 58%);
  --glow-hero-sky:   radial-gradient(110% 55% at 50% -20%, rgba(110,143,206,.40) 0%, rgba(110,143,206,0) 60%), radial-gradient(84% 48% at 50% 118%, rgba(90,128,206,.32) 0%, rgba(90,128,206,0) 58%);
  --glow-hero-rose:  radial-gradient(96% 36% at 50% -6%, rgba(239,160,190,.66) 0%, rgba(239,160,190,0) 62%), radial-gradient(86% 32% at 50% 108%, rgba(212,94,134,.48) 0%, rgba(212,94,134,0) 58%);
  --glow-hero-sage:  radial-gradient(90% 40% at 40% 112%, rgba(166,194,149,.52) 0%, rgba(166,194,149,0) 60%), radial-gradient(64% 34% at 6% -4%, rgba(138,168,117,.40) 0%, rgba(138,168,117,0) 58%);
  --d-hero-breath: 8s;

  /* ============ LIQUID GLASS (v5.1, Eyro philosophy) ============
     The glow comes from the backdrop filter, never a white veil. */
  --glass-liquid-veil:   linear-gradient(150deg, rgba(255,252,246,.16), rgba(255,252,246,.05));
  --glass-liquid-blur:   blur(30px) saturate(180%) brightness(1.18);
  --glass-liquid-shadow: 0 28px 66px -20px hsla(18,55%,26%,.34), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(255,255,255,.06);
  --glass-liquid-brd:    rgba(255,252,246,.24);
  --glass-liquid-sheen:  radial-gradient(130% 85% at 12% -6%, rgba(255,255,255,.26), rgba(255,255,255,0) 52%);

  /* ============ DOTTED NUMERAL (v5.1, fenced) ============
     Mono metadata only, never a score; only on hero-bloom cores. */
  --dot-ink:  #F4EEE1;
  --dot-halo: rgba(246,200,150,.50);
  --dot-grid: 5.2px;

  /* Grain: kills banding over any glow larger than a card (law 3) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ============ SHADOWS — warm WITH the light, print-flat ============ */
  --shadow-hue: 18 55% 32%;
  --shadow-xs: 0 1px 2px hsla(var(--shadow-hue) / .06);
  --shadow-sm: 0 1px 2px hsla(var(--shadow-hue) / .05), 0 3px 8px hsla(var(--shadow-hue) / .06);
  --shadow-md: 0 2px 4px hsla(var(--shadow-hue) / .05), 0 10px 22px hsla(var(--shadow-hue) / .08);
  --shadow-lg: 0 4px 10px hsla(var(--shadow-hue) / .06), 0 20px 36px -12px hsla(var(--shadow-hue) / .13);
  --shadow-bloom: 0 18px 50px -22px rgba(240,104,74,.38);
  --focus-ring: 0 0 0 3px rgba(196,58,30,.38);   /* vermilion source #C43A1E, 4.84 non-text */

  /* ============ MATERIALS ============ */
  --well-inset:  inset 1.5px 1.5px 4px hsla(18 55% 30% / .14), inset -1.5px -1.5px 3px rgba(255,255,255,.85);
  --raise-shadow: 2.5px 2.5px 7px hsla(18 55% 30% / .12), -2.5px -2.5px 6px rgba(255,255,255,.9);
  --press-inset: inset 2px 2px 5px hsla(18 55% 30% / .18), inset -1px -1px 3px rgba(255,255,255,.5);
  --glass-fill:   rgba(255,252,246,.68);
  --glass-border: rgba(24,35,56,.10);
  --glass-blur:   18px;
  --plate-dark-hairline: rgba(244,238,225,.14);

  /* ============ SHAPE — pills are touched, rectangles hold data ============ */
  --r-xs: 8px;     /* micro exception, inside containers only */
  --r-sm: 13px;    /* wells, inputs, data chips, day cells */
  --r-md: 18px;    /* plates, the default */
  --r-lg: 24px;    /* hero plates, sheet tops */
  --r-xl: 32px;    /* the ONE featured/backlit bloom card */
  --r-pill: 999px;

  /* ============ SPACE — 4px base ============ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --sec-rhythm: clamp(56px, 8vw, 112px);

  /* ============ TYPE — the four voices ============ */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "InterTight", "Inter", system-ui, -apple-system, sans-serif;
  --font-ui:   var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --t-display: clamp(2.75rem, 5.5vw, 4.25rem);
  --t-h1:      clamp(2.1rem, 4vw, 3rem);
  --t-h2:      clamp(1.65rem, 3vw, 2.25rem);
  --t-h3:      1.375rem;
  --t-h4:      1.125rem;
  --t-quote:   clamp(1.4rem, 2.4vw, 1.75rem);
  --t-body-lg: 1.125rem;
  --t-body:    1rem;
  --t-sm:      .9375rem;
  --t-caption: .8125rem;
  --t-eyebrow: .75rem;

  /* ============ MOTION — alles landt zacht, niets veert ============ */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-across: cubic-bezier(.65, 0, .35, 1);
  --ease-adem:   cubic-bezier(.37, 0, .63, 1);
  --d-press:   90ms;  --d-state: 160ms;  --d-swap:  220ms;  --d-control: 240ms;
  --d-enter:  320ms;  --d-reveal:480ms;  --d-draw:  700ms;  --d-adem:   2000ms;
  --d-drift:   32s;   /* bloom mesh breath */
  --stagger:   45ms;
  --rise-1: 8px; --rise-2: 12px; --rise-3: 16px; --rise-4: 22px;
}

/* ============================================================
   DARK — de nachtzee. The same sea after dusk: indigo-black
   water, one low coral ember. Not an inversion, a second place.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;
  --paper:     #0C1428;   /* void, night water (ink 15.28) */
  --paper-alt: #101A32;
  --card:      #16203A;
  --sink:      #0A1120;
  --raise:     #1B2540;
  --hairline:        #26314C;
  --hairline-strong: #34415E;
  --hairline-warm:   #8A7A55;

  --ink:         #F0EADD;   /* 15.28 on void */
  --ink-soft:    #C8C6BC;   /* 10.69 */
  --ink-muted:   #A4ABBD;   /* 7.97 */
  --ink-faint:   #5A6478;   /* still non-text */
  --ink-inverse: #182338;   /* on the one cream plate: the sun inside the night */
  --ink-wash:    #1C2438;

  /* accents lift so they glow on dark water (all computed AA in SPEC §2.7) */
  --gold:      #E7B84E;  --gold-mark: #C99A34;  --gold-deep: #E7B84E;  --gold-text: #E7B84E;
  --gold-wash: #2E250E;  --gold-soft: #4A3A16;  --gold-tint: #E7B84E;
  --amber:     #EDA24E;  --amber-mark: #D08A38; --amber-deep: #EDA24E; --amber-text: #EDA24E;
  --amber-wash: #32210E; --amber-soft: #4E3416; --amber-tint: #EDA24E;
  --apricot:   #EFA061;  --apricot-mark: #D6854A; --apricot-deep: #EFA061;
  --apricot-wash: #33200F; --apricot-soft: #503218; --apricot-tint: #EFA061;
  --coral:     #F0907A;  --coral-mark: #E8795E; --coral-deep: #F0907A; --coral-text: #F0907A;
  --coral-wash: #331B12; --coral-soft: #58291C; --coral-tint: #F0907A;
  --vermilion: #F0684A;  --vermilion-deep: #F0907A;
  --raspberry-deep: #E793A3;  --raspberry-mark: #D97A8E;
  --raspberry-wash: #3A2433;  --raspberry-soft: #6E3A4A;  --raspberry-tint: #E793A3;
  --sky:       #8AA6DC;  --sky-mark: #7392CE;  --sky-deep: #8AA6DC;  --sky-text: #8AA6DC;
  --sky-wash:  #1A2440;  --sky-soft: #2C3C64;  --sky-tint: #8AA6DC;
  --sage:      #A6C295;  --sage-mark: #8FAE7C; --sage-deep: #A6C295;  --sage-text: #A6C295;
  --sage-wash: #1F2A18;  --sage-soft: #35452A; --sage-tint: #A6C295;
  --done:  #6E5B54;
  --today: #F0907A;

  /* dark CTA: dark ink on lifted coral->gold (7.71 / 7.13 / 9.76) */
  --cta-ink:    #241207;
  --cta-border: rgba(240,144,122,.4);
  --cta-sheen:  inset 0 1px 1px rgba(255,255,255,.22);
  --cta-shade:  inset 0 -4px 8px rgba(120,50,20,.25);
  --cta-shadow: 0 2px 6px rgba(3,6,14,.5), 0 10px 24px -10px rgba(240,144,122,.35);
  --grad-cta:       linear-gradient(168deg, #F0907A 0%, #E88C50 46%, #E7B84E 100%);
  --grad-cta:       linear-gradient(168deg in oklch, #F0907A 0%, #E88C50 46%, #E7B84E 100%);
  --grad-cta-hover: linear-gradient(172deg, #F49E8A 0%, #EE9A5E 46%, #EDC35E 100%);
  --grad-cta-hover: linear-gradient(172deg in oklch, #F49E8A 0%, #EE9A5E 46%, #EDC35E 100%);

  --grad-dageraad: var(--bloom-nachtzee);
  --grad-section: linear-gradient(178deg, #0C1428 0%, #111A30 60%, #16203A 100%);
  --grad-tint: radial-gradient(140% 120% at 100% 0%, rgba(231,184,78,.08), rgba(240,144,122,.05) 40%, transparent 70%);

  /* the one place warm shadows yield: warm-on-black muddies */
  --shadow-hue: 225 45% 4%;
  --shadow-xs: 0 1px 2px rgba(3,6,14,.4);
  --shadow-sm: 0 1px 2px rgba(3,6,14,.35), 0 3px 8px rgba(3,6,14,.4), inset 0 1px 0 rgba(240,234,221,.04);
  --shadow-md: 0 2px 4px rgba(3,6,14,.35), 0 10px 22px rgba(3,6,14,.5), inset 0 1px 0 rgba(240,234,221,.04);
  --shadow-lg: 0 4px 10px rgba(3,6,14,.4), 0 20px 36px -12px rgba(3,6,14,.6), inset 0 1px 0 rgba(240,234,221,.04);
  --shadow-bloom: 0 18px 50px -22px rgba(240,144,122,.30);
  --focus-ring: 0 0 0 3px rgba(240,144,122,.4);

  --well-inset:  inset 1.5px 1.5px 4px rgba(3,6,14,.5), inset -1.5px -1.5px 3px rgba(240,234,221,.05);
  --raise-shadow: 2.5px 2.5px 7px rgba(3,6,14,.5), -2.5px -2.5px 6px rgba(240,234,221,.05);
  --press-inset: inset 2px 2px 5px rgba(3,6,14,.6), inset -1px -1px 3px rgba(240,234,221,.04);
  --glass-fill:   rgba(16,24,44,.66);
  --glass-border: rgba(240,234,221,.10);
  --plate-dark-hairline: rgba(24,35,56,.14);

  /* liquid glass at night: brightness pulled to 1.08 so the low ember
     glows through instead of blowing out */
  --glass-liquid-veil:   linear-gradient(150deg, rgba(240,234,221,.10), rgba(240,234,221,.03));
  --glass-liquid-blur:   blur(30px) saturate(150%) brightness(1.08);
  --glass-liquid-shadow: 0 28px 64px -22px rgba(3,6,14,.66), inset 0 1px 0 rgba(240,234,221,.14), inset 0 -1px 0 rgba(3,6,14,.2);
  --glass-liquid-brd:    rgba(240,234,221,.16);
  --glass-liquid-sheen:  radial-gradient(130% 85% at 12% -6%, rgba(240,234,221,.14), rgba(240,234,221,0) 52%);
}

/* Theme islands re-apply their own ink (dark demo inside a light page) */
[data-theme="light"], [data-theme="dark"] { color: var(--ink); }

/* ============================================================
   LEGACY ALIAS CONTRACT — v4 Herbarium + v3 Terracotta -> v5.
   Adoption is a token flip: legacy text names map only to
   AA-passing v5 values; oversized radii clamp to --r-xl.
   ============================================================ */
:root, [data-theme="dark"] {
  /* v4 Herbarium */
  --raspberry: var(--coral);
  --mulberry: #C4381C;            --mulberry-deep: #7A1E1A;
  --blush: var(--coral-wash);     --blush-soft: var(--coral-soft);   --blush-text: var(--coral-text);
  --lilac: var(--sky);            --lilac-wash: var(--sky-wash);
  --lilac-dark: var(--sky-mark);  --lilac-text: var(--sky-text);
  --tide: var(--sky);             --tide-wash: var(--sky-wash);      --tide-text: var(--sky-text);
  --honey: var(--gold-mark);      --honey-wash: var(--gold-wash);    --honey-text: var(--gold-text);
  --berry: #8A4A6E;               --berry-wash: var(--raspberry-wash); --berry-text: var(--raspberry-deep);
  --sage-dark: var(--sage-mark);  --sage-soft-v4: var(--sage-soft);
  --grad-dusk: var(--grad-morgenrood);
  --grad-raspberry: var(--grad-horizon);
  --grad-sage: linear-gradient(135deg, var(--sage-soft), var(--sage-mark));
  --grad-lilac: linear-gradient(135deg, var(--sky-soft), var(--sky-mark));
  --grad-blush: linear-gradient(135deg, var(--coral-wash), var(--coral-soft));
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.9), transparent 40%);
  /* v3 Terracotta + app semantics */
  --terra: var(--coral-deep);  --espresso: var(--ink);   --apricot-v3: var(--coral-wash);
  --rose: var(--coral-soft);   --rose-dark: var(--coral-deep); --rose-deep: var(--raspberry-deep);
  --rose-wash: var(--coral-wash); --rose-soft: var(--coral-soft);
  --grape-500: var(--sky);     --grape-600: var(--sky-mark);   --grape-700: var(--sky-deep);
  --teal: var(--sage-mark);    --teal-dark: var(--sage-deep);  --teal-soft: var(--sage-wash);
  --gold-v3: var(--gold-mark); --coral-v3: var(--coral-deep);
  --warn: var(--gold-deep);    --alert: var(--coral-deep);
  --ok: var(--sage-deep);      --success: var(--sage-deep);    --info: var(--sky-deep);
  --clay-done: var(--done);    --star-today: var(--today);     --champagne: var(--hairline-warm);
  --bg: var(--paper);          --bg-alt: var(--paper-alt);     --bg-card: var(--card);
  --canvas: var(--paper);      --canvas-warm: var(--paper-alt); --canvas-sink: var(--sink);
  --border: var(--hairline);   --border-strong: var(--hairline-strong);
  --fg: var(--ink);            --fg-muted: var(--ink-soft);
  --fg-subtle: var(--ink-muted); --fg-inverse: var(--ink-inverse);
  --ink-onColor: var(--cta-ink); --ink-line: var(--hairline-strong);
  --grad-aurora: var(--bloom-morning); --grad-grape: var(--grad-cta);
  --clay-surface: var(--raise);  --clay-shadow: var(--raise-shadow);
  --clay-shadow-sm: 2px 2px 5px hsla(var(--shadow-hue) / .10), -2px -2px 4px rgba(255,255,255,.85);
  --clay-pressed: var(--press-inset); --clay-well: var(--well-inset);
  --glass-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
  --skeuo-shadow: 0 1px 0 rgba(255,255,255,.85), 0 14px 28px -14px hsla(var(--shadow-hue) / .40);
  --r-2xl: var(--r-xl);
  --ease-soft: var(--ease-settle); --ease-out: var(--ease-settle);
  --t-xs: var(--t-eyebrow);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.75);
}

/* ============================================================
   MATERIAL PRIMITIVES — the papers, the glass, the light
   ============================================================ */
.plate {
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
}
.plate-stock[data-stock="gold"]   { background: var(--gold-wash); border-color: rgba(122,84,16,.14); }
.plate-stock[data-stock="amber"]  { background: var(--amber-wash); border-color: rgba(138,74,22,.14); }
.plate-stock[data-stock="peach"]  { background: var(--apricot-wash); border-color: rgba(143,69,32,.14); }
.plate-stock[data-stock="coral"]  { background: var(--coral-wash); border-color: rgba(154,52,40,.14); }
.plate-stock[data-stock="sky"]    { background: var(--sky-wash); border-color: rgba(46,67,116,.14); }
.plate-stock[data-stock="sage"]   { background: var(--sage-wash); border-color: rgba(71,89,63,.14); }
.plate-dark {
  background: var(--bloom-nachtzee);
  color: var(--ink-inverse);
  border: 1px solid var(--plate-dark-hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-md);
}
[data-theme="dark"] .plate-dark {
  background: #F0EADD;   /* the cream-plate inversion: the sun inside the night */
  color: #182338;
  border-color: rgba(24,35,56,.14);
}
.well {
  background: var(--sink);
  border: 0;
  box-shadow: var(--well-inset);
  border-radius: var(--r-sm);
}
.raised { background: var(--raise); box-shadow: var(--raise-shadow); }
.press, .pressable:active {
  box-shadow: var(--press-inset);
  transform: translateY(1px) scale(.99);
}
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="dark"] .glass { box-shadow: var(--shadow-sm); }

/* ---------- the bloom stack: glow + grain + catch (SPEC §3.4) ---------- */
.bloom-host { position: relative; isolation: isolate; }
.bloom {
  position: absolute; inset: -20%; z-index: -1;
  background: var(--bloom-morning);
  filter: blur(28px);
  pointer-events: none;
}
.bloom[data-bloom="dageraad"] { background: var(--grad-dageraad); filter: blur(20px); inset: -8%; }
.bloom[data-bloom="vitaal"]   { background: var(--bloom-vitaal); }
.bloom[data-bloom="nachtzee"] { background: var(--bloom-nachtzee); }
.grain {
  position: absolute; inset: 0; z-index: 0;
  background: var(--grain);
  mix-blend-mode: overlay;
  opacity: .035;
  pointer-events: none;
}
/* the backlit material: content panel above the glow, edge catches light */
.backlit {
  position: relative; isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-bloom);
}
.backlit::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; padding: 1px;
  background: var(--grad-horizon);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .3;
  transition: opacity var(--d-state) var(--ease-settle);
}
.backlit:hover::before, .backlit:focus-within::before { opacity: 1; }
.backlit > * { position: relative; z-index: 1; }
.plate-vitaal { position: relative; isolation: isolate; overflow: hidden; }
.plate-vitaal::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--bloom-vitaal);
  opacity: .5;
}
.plate-vitaal > * { position: relative; z-index: 1; }

::selection { background: var(--gold-soft); color: var(--ink); }
[data-theme="dark"] ::selection { background: var(--sky-soft); color: var(--ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  transition: box-shadow 120ms var(--ease-settle);
}

/* ============================================================
   REDUCED MOTION — first-class. Transforms neutralized, short
   crossfades allowed, blooms freeze to a composed still.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-property: opacity, box-shadow !important;
    scroll-behavior: auto !important;
  }
}