/* ============================================================
   SeneGence Learning Hub — design tokens
   Light + dark are token SETS; components never hardcode color.
   Theme resolution: [data-theme] wins, else prefers-color-scheme.
   ============================================================ */

:root {
  /* Brand (SeneGence Identity Guide 2023) */
  --navy: #0C2340;
  --reflex: #001489;
  --gold: #9C8A5A;
  --gold-deep: #7E6E42;
  --gold-bright: #CBA14E;
  --gold-light: #E7CE92;

  /* Jewel accents — the ONLY choices the Studio exposes */
  --jewel-emerald: #00843D;
  --jewel-aqua: #00857C;
  --jewel-sapphire: #0B3D63;
  --jewel-amethyst: #5F259F;
  --jewel-ruby: #A6192E;
  --jewel-coral: #E63E2E;
  --jewel-jasper: #F2A900;

  /* Type — Didot display / Avenir body (brand-spec stacks) */
  --font-display: 'Didot', 'GFS Didot', 'Playfair Display', Georgia, serif;
  --font-body: 'Avenir Next', 'Avenir', 'Montserrat', system-ui, -apple-system, sans-serif;

  /* ============ RUNTIME DESIGN KNOBS ============
     These vars are overridable at runtime from the Studio's Design panel
     (registry: worker/src/design-knobs.ts; applied by applySettings() in api.js).
     Every consumer uses var(--knob, default) so absence = designed default. */
  /* --glass-blur          set below per pointer type; Studio override wins */
  /* --glass-intensity     multiplies all glass fill alphas (default 1)     */
  /* --r-card              card/sheet radius (default 24px)                 */
  /* --motion-scale        multiplies all durations (default 1)             */
  /* --hero-overlay-alpha  hero darkening (default .55)                     */
  /* --section-scale       multiplies section spacing (default 1)           */
  /* --type-scale          multiplies display type only (default 1)        */

  /* Fluid type scale (display sizes × --type-scale knob) */
  --text-hero: calc(clamp(2.6rem, 7vw + 1rem, 6.5rem) * var(--type-scale, 1));
  --text-title: calc(clamp(1.8rem, 3.5vw + .5rem, 3rem) * var(--type-scale, 1));
  --text-card-title: calc(clamp(1.25rem, 2vw + .5rem, 1.6rem) * var(--type-scale, 1));
  --text-body: clamp(1rem, .5vw + .85rem, 1.125rem);
  --text-caption: .8125rem;

  /* 8px spacing grid */
  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 80px;
  --section-y: calc(clamp(64px, 12vh, 160px) * var(--section-scale, 1));
  --section-x: clamp(20px, 5vw, 60px);

  /* Radii — concentric: inner derives from card radius automatically */
  --r-card: 24px;
  --r-inner: calc(var(--r-card, 24px) - 6px);
  --r-pill: 980px;

  /* Motion (all durations × --motion-scale knob) */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --ease-gentle: cubic-bezier(.4, 0, .2, 1);
  --dur-micro: calc(.3s * var(--motion-scale, 1));
  --dur-enter: calc(.7s * var(--motion-scale, 1));

  /* Layout */
  --nav-h: 60px;
  --tabbar-h: 76px;
  --content-max: 1180px;

  /* Glass blur budget: coarse pointers get less (perf) */
  --glass-blur: 12px;
  --accent: var(--gold);

  /* ---- Glazed Maximalism additions (2026-07, strictly additive) ---- */

  /* Gold is a metal: hairline gradient for rules/eyebrow underlines */
  --hairline-gold: linear-gradient(90deg, transparent, color-mix(in srgb, var(--knob-accent-gold-light, var(--gold)) 55%, transparent), transparent); /* follows the gold palette knob */

  /* Film grain (data-URI SVG noise; no network, no external deps).
     --noise-url  = full-contrast tile, pair with opacity (.grain does this).
     --noise-url-soft = alpha baked in (~.08), safe to stack directly in a
     multi-layer background (used by .cover-fallback / .band--art). */
  --noise-url: 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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-url-soft: 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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");

  /* Track-jewel plumbing defaults. NOTE: --track-jewel itself is deliberately
     NOT set on :root — components opt in with var(--track-jewel, <gold>) so
     the jewel only appears once a bg-* ancestor (or the Studio) provides it. */
  --track-tint-08: color-mix(in oklch, var(--gold) 8%, var(--ground));
  --track-tint-16: color-mix(in oklch, var(--gold) 16%, var(--ground));
  --track-deep: color-mix(in oklch, var(--gold) 45%, var(--navy));

  /* ---- READING LAYER (2026-07-04, strictly additive) ----
     Type-rhythm tokens for long-form copy (design/DIRECTION.md →
     "The Reading Layer"). Consumers keep the var(--x, default)
     pattern, so these are Studio-tunable later with zero churn. */

  /* Reading measure — the 62–68ch band; 66ch is the sweet spot for
     Avenir Next at --text-body. Always consumed as
     min(var(--rt-measure, 66ch), 100%) so narrow viewports win. */
  --rt-measure: 66ch;

  /* Key-phrase emphasis weight. The spec's 650 intent: Avenir Next
     ships static 400/500/600/700 faces, so a 650 request resolves UP
     to 700 (too loud inline) or synthesizes (mushy strokes). Demi
     Bold 600 is the crisp true face — the token defaults there; a
     variable-font future can raise it to 650 without touching CSS. */
  --rt-strong-weight: 600;

  /* Caption-plus — between --text-caption (.8125rem) and --text-body:
     quiz explanations, completion recap. */
  --text-caption-plus: .9375rem;

  /* ---- POLISH PASS (2026-07-04, strictly additive) ---- */

  /* [P1-8] Gold-as-metal CTA fill — INDEPENDENT of --accent.
     Pages set --accent to the track JEWEL at runtime (track.js/packet.js
     `setProperty('--accent', accent_color)`) so ring/dot/progress lean toward
     the jewel — but a primary BUTTON must stay the grandfathered gold pill
     (DIRECTION laws 3 & 4). .btn re-points its background at --cta-fill so the
     jewel override can no longer leak into the touch layer. Defaults to the
     same gold --accent resolves to per theme, so nothing changes visually where
     --accent was NOT overridden; it only STOPS the jewel from filling buttons.
     A subtle vertical burnish + on-accent ink keep it reading as brushed metal.
     Studio can still retune the gold via these tokens (var(--x,default)). */
  --cta-fill: var(--gold);
  --cta-fill-2: var(--gold-deep);
  --cta-ink: var(--ink-on-accent);

  /* [P2-6] Focus-ring token — split from --accent so the indicator can clear
     the 3:1 non-text threshold (WCAG 1.4.11 / 2.4.7) on the bone light ground,
     where gold-on-bone is only ~2.9:1. Light re-points it to ink below; dark
     keeps gold (passes on navy). Consumed as var(--focus-ring, var(--accent)). */
  --focus-ring: var(--accent);
}

@media (pointer: fine) { :root { --glass-blur: 16px; } }
@media (pointer: coarse) { :root { --glass-blur: 8px; } }

/* ---------- LIGHT (default) ---------- */
:root, [data-theme="light"] {
  color-scheme: light;
  /* Rhode-warm grounds: bone / putty / warm gray (Glazed Maximalism) */
  /* [v3 color knob] page ground — registry --knob-ground-light
     (design-knobs.ts); fallback = the exact literal it replaced. */
  --ground: var(--knob-ground-light, #FBFAF7);
  --ground-alt: #F2EFE9;
  /* [v3 color knobs] light accent gold — registry --knob-accent-gold-light.
     Consumed at BOTH accent entry points for this theme: --accent (rings,
     dots, progress lean) and --cta-fill (the gold button metal, per its
     registry help "buttons, hairlines, ornament"). Fallback var(--gold)
     = #9C8A5A, the literal each replaced — no knob, no change. A page's
     runtime track accent (inline --accent on <html>) still outranks this,
     which is the intended hierarchy: track accent > global gold knob. */
  --accent: var(--knob-accent-gold-light, var(--gold));
  --cta-fill: var(--knob-accent-gold-light, var(--gold));
  --ink: var(--navy);
  /* [tech-a11y contrast, HIGH] darkened #75716B → #706C66: the old value was
     4.23:1 on --ground-alt putty (#F2EFE9) — BELOW AA — anywhere .band /
     .section--alt (which re-point to --ink-secondary-alt) are NOT applied. New
     value clears AA on ground-alt (4.55:1) and stays comfortable on bone
     --ground (5.0:1). Dark theme's --ink-secondary is unchanged below. */
  --ink-secondary: #706C66;
  /* dark ink on the gold CTA — white failed AA on the gold gradient (3.02:1);
     near-black clears 4.69:1 at the deepest stop, matching the .r-submit fix */
  --ink-on-accent: #1a1206;

  /* Companions for --ground-alt surfaces (keep secondary text ≥4.5:1 on putty;
     .section--alt/.band re-point --ink-secondary/--accent-text at these) */
  --ink-secondary-alt: #6B6760;
  --accent-text-alt: #6F6039;

  /* Rhode-soft card shadows (light only — dark keeps current depths) */
  --shadow-card: 0 1px 2px rgba(12,35,64,.05), 0 12px 32px -8px rgba(12,35,64,.10);
  --shadow-card-hover: 0 2px 4px rgba(12,35,64,.06), 0 24px 56px -12px rgba(12,35,64,.16);

  /* Ambient field ground-clamp + grain strength (per DIRECTION law 2) */
  --ambient-clamp: 72%;
  --grain-opacity: .04;
  --glass-rim-side: rgba(255,255,255,.20);

  --glass-fill: rgba(255, 255, 255, calc(.12 * var(--glass-intensity, 1)));
  --glass-fill-strong: rgba(255, 255, 255, calc(.55 * var(--glass-intensity, 1)));
  --glass-border: rgba(255, 255, 255, .28);
  --glass-rim-top: rgba(255, 255, 255, .75);
  --glass-rim-bottom: rgba(255, 255, 255, .30);
  --glass-shadow: 0 8px 32px rgba(12, 35, 64, .14);
  --glass-solid-fallback: rgba(255, 255, 255, .88);
  --glass-ink: var(--navy);

  --hero-overlay: linear-gradient(180deg,
    rgba(12,35,64, calc(var(--hero-overlay-alpha, .55) * .45)),
    rgba(12,35,64, var(--hero-overlay-alpha, .55)));
  --accent-text: var(--gold-deep);

  /* [P2-6] Light-mode focus ring goes ink-navy: navy-on-bone clears 3:1 with
     margin (the ink offset in :focus-visible adds separation over any color). */
  --focus-ring: var(--ink);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  /* [v3 color knob] dark ground — registry --knob-ground-dark; fallback =
     the exact literal it replaced (mirrored in the system-dark block below). */
  --ground: var(--knob-ground-dark, #0a1526);
  --ground-alt: #0e1c33;
  --ink: #f5f5f7;
  --ink-secondary: #a1a1a6;
  --ink-on-accent: #1a1206;  /* near-black on gold: navy dipped to 3.15:1 at the deep stop */

  --ink-secondary-alt: #a1a1a6;
  --accent-text-alt: var(--gold-light);
  --shadow-card: 0 10px 30px rgba(12,35,64,.18);
  --shadow-card-hover: 0 20px 44px rgba(12,35,64,.28);
  --ambient-clamp: 55%;
  --grain-opacity: .06;
  --glass-rim-side: rgba(255,255,255,.12);

  --glass-fill: rgba(12, 35, 64, calc(.38 * var(--glass-intensity, 1)));
  --glass-fill-strong: rgba(12, 35, 64, calc(.72 * var(--glass-intensity, 1)));
  --glass-border: rgba(231, 206, 146, .22);
  --glass-rim-top: rgba(255, 255, 255, .45);
  --glass-rim-bottom: rgba(203, 161, 78, .25);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .45);
  --glass-solid-fallback: rgba(14, 28, 51, .94);
  --glass-ink: #f5f5f7;

  --hero-overlay: linear-gradient(180deg,
    rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * .64)),
    rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * 1.27)));
  /* [v3 color knobs] dark accent gold — registry --knob-accent-gold-dark;
     fallback var(--gold-bright) = #CBA14E, the literal each replaced. */
  --accent: var(--knob-accent-gold-dark, var(--gold-bright));
  --hairline-gold: linear-gradient(90deg, transparent, color-mix(in srgb, var(--knob-accent-gold-dark, var(--gold-bright)) 55%, transparent), transparent); /* follows the dark gold knob */
  --accent-text: var(--gold-light);
  /* [P1-8] dark CTA keeps the brighter gold the button used before (--accent
     was --gold-bright here); --focus-ring inherits --accent (gold), which
     passes 3:1 on navy, so no dark override needed. */
  --cta-fill: var(--knob-accent-gold-dark, var(--gold-bright));
  --cta-fill-2: var(--gold-deep);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    /* [v3 color knob] mirrors the explicit-dark --knob-ground-dark consumption */
    --ground: var(--knob-ground-dark, #0a1526);
    --ground-alt: #0e1c33;
    --ink: #f5f5f7;
    --ink-secondary: #a1a1a6;
    --ink-on-accent: #1a1206;  /* near-black on gold: navy dipped to 3.15:1 at the deep stop */
    --ink-secondary-alt: #a1a1a6;
    --accent-text-alt: var(--gold-light);
    --shadow-card: 0 10px 30px rgba(12,35,64,.18);
    --shadow-card-hover: 0 20px 44px rgba(12,35,64,.28);
    --ambient-clamp: 55%;
    --grain-opacity: .06;
    --glass-rim-side: rgba(255,255,255,.12);
    --glass-fill: rgba(12, 35, 64, calc(.38 * var(--glass-intensity, 1)));
    --glass-fill-strong: rgba(12, 35, 64, calc(.72 * var(--glass-intensity, 1)));
    --glass-border: rgba(231, 206, 146, .22);
    --glass-rim-top: rgba(255, 255, 255, .45);
    --glass-rim-bottom: rgba(203, 161, 78, .25);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, .45);
    --glass-solid-fallback: rgba(14, 28, 51, .94);
    --glass-ink: #f5f5f7;
    --hero-overlay: linear-gradient(180deg,
      rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * .64)),
      rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * 1.27)));
    /* [v3 color knobs] mirror the explicit-dark --knob-accent-gold-dark
       consumption for the system-dark path */
    --accent: var(--knob-accent-gold-dark, var(--gold-bright));
  --hairline-gold: linear-gradient(90deg, transparent, color-mix(in srgb, var(--knob-accent-gold-dark, var(--gold-bright)) 55%, transparent), transparent); /* follows the dark gold knob */
    --accent-text: var(--gold-light);
    /* [P1-8] mirror the explicit-dark CTA tokens for the system-dark path */
    --cta-fill: var(--knob-accent-gold-dark, var(--gold-bright));
    --cta-fill-2: var(--gold-deep);
  }
}

/* Background-layer gradients (Studio "Visuals" choices) */
.bg-navy-gold  { background: linear-gradient(160deg, var(--navy) 0%, #1a3a5f 55%, var(--gold-deep) 140%); }
.bg-emerald    { background: linear-gradient(160deg, #04281a 0%, var(--jewel-emerald) 130%); }
.bg-amethyst   { background: linear-gradient(160deg, #1d0b33 0%, var(--jewel-amethyst) 130%); }
.bg-ruby       { background: linear-gradient(160deg, #2b040d 0%, var(--jewel-ruby) 130%); }
.bg-sapphire   { background: linear-gradient(160deg, #041526 0%, var(--jewel-sapphire) 130%); }
.bg-aqua       { background: linear-gradient(160deg, #012a27 0%, var(--jewel-aqua) 130%); }
.bg-jasper     { background: linear-gradient(160deg, #2e2003 0%, var(--jewel-jasper) 140%); }

/* ============================================================
   VISUAL FREEDOM — owner accent chain (Studio v3, 2026-07-05).
   CLEARLY-SCOPED BLOCK: this block plus the four --knob-* color
   consumptions in the theme blocks above are the ONLY v3 edits
   to this file (frozen contract).

   Renderers set per-theme accents INLINE from the API payload,
   validated #rrggbb only, before they ever touch a style attr:
     --track-accent-light : tracks.accent_color
     --track-accent-dark  : tracks.accent_dark ?? accent_color
   — on <html> for a whole page (track.html, packet.html) or on a
   single card/tile (index.html, tracks.html).

   --track-accent resolves to the right side per theme AT EVERY
   ELEMENT (the * rules — a :root-only chain would substitute at
   :root and bake that value in, blind to card-level inline vars;
   the inputs inherit, so per-element re-resolution is identical
   to inheritance except where inline inputs actually live).
   Unset inputs collapse to the guaranteed-invalid value, and every
   consumer reads var(--track-accent, fallback) — so with no owner
   accent nothing anywhere changes.

   --track-jewel resolution order (DIRECTION law 2 as amended —
   the 7 jewels are now DEFAULTS, any accent may override):
     1. owner accent  (--track-accent, theme-resolved)
     2. bg-* class jewel (DB gradient contract — names frozen,
        still the gradient/ambience layer)
     3. gold (consumers' own var(--track-jewel, var(--gold)))
   --track-jewel stays deliberately unset on :root (see note in
   the brand block above) — components still opt in via fallback.
   ============================================================ */
* { --track-accent: var(--track-accent-light); }
[data-theme="dark"], [data-theme="dark"] * {
  --track-accent: var(--track-accent-dark, var(--track-accent-light));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root:not([data-theme]) * {
    --track-accent: var(--track-accent-dark, var(--track-accent-light));
  }
}

/* ---- Track-jewel plumbing (Glazed Maximalism, additive) ----
   Each bg-* class (a DATABASE contract — names frozen) also announces its
   jewel; anything inside can read var(--track-jewel) plus the derived tints.
   Derived values are re-declared on the bg-* element itself so they resolve
   against ITS --track-jewel, not the :root gold default.
   [v3] the owner accent (chain above) now outranks the class jewel — with
   no accent set, --track-accent is guaranteed-invalid and each class falls
   back to exactly the jewel it declared before. */
.bg-navy-gold  { --track-jewel: var(--track-accent, var(--gold)); }
.bg-emerald    { --track-jewel: var(--track-accent, var(--jewel-emerald)); }
.bg-amethyst   { --track-jewel: var(--track-accent, var(--jewel-amethyst)); }
.bg-ruby       { --track-jewel: var(--track-accent, var(--jewel-ruby)); }
.bg-sapphire   { --track-jewel: var(--track-accent, var(--jewel-sapphire)); }
.bg-aqua       { --track-jewel: var(--track-accent, var(--jewel-aqua)); }
.bg-jasper     { --track-jewel: var(--track-accent, var(--jewel-jasper)); }

.bg-navy-gold, .bg-emerald, .bg-amethyst, .bg-ruby,
.bg-sapphire, .bg-aqua, .bg-jasper {
  --track-tint-08: color-mix(in oklch, var(--track-jewel) 8%, var(--ground));
  --track-tint-16: color-mix(in oklch, var(--track-jewel) 16%, var(--ground));
  --track-deep: color-mix(in oklch, var(--track-jewel) 45%, var(--navy));
}

/* ============================================================
   RHODE READER LAYER  (2026-07-05, strictly additive)
   Grounded in the approved reference (scratchpad/rhode-reader.html,
   Alan-approved). The reader is ONE cool-putty ground everywhere —
   text, chrome and photography all sit on it: no framed cards, no
   dark glass inside the reading column. These tokens power reader.css
   and the reader-idiom restyles of .rt-spec / .rt-callout / .ed-* .

   CONTRACT: purely NEW names — nothing existing is renamed or
   re-pointed. Every value is a designed default; if a future Studio
   knob wants to tune it, add --knob-* on the fallback slot (the same
   var(--x, default) discipline the rest of this file uses). All reader
   consumers read var(--reader-*, <literal>) so absence == this default.
   ============================================================ */

:root {
  /* --- The BLEND type system (Alan's call) ---
     Heavy LOWERCASE grotesque carries the big display (hero title,
     section heads). Didot (--font-display, existing) is reserved for
     editorial ACCENTS / pull-quotes. Avenir (--font-body) reads the
     prose. Mono (below) labels the fine print. The reference proved
     the personality is EXTREME scale contrast, not a new typeface. */
  --font-grotesque: 'Helvetica Neue', 'Helvetica Neue LT', 'Helvetica', 'Arial', sans-serif;
  /* Mono for tiny labels + clinical disclaimers (matches the reference
     --mono). Named --font-mono so it can be shared beyond the reader. */
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Reader display metrics — the frozen reference values. Consumers may
     still override per-element; these are the giant-lowercase defaults. */
  --reader-display-weight: 800;      /* hero + claim big-number */
  --reader-head-weight: 700;         /* section heads */
  --reader-display-tracking: -.035em;
  --reader-head-tracking: -.03em;

  /* Reading measure for the reader column. Distinct from --rt-measure
     (66ch, used by richtext/spec) — the reference column is a tighter
     620px display measure that keeps the giant type from over-running. */
  --reader-measure: 620px;

  /* Frameless photography shadow — the ONLY separation a reader image
     gets (no mat, no rim). Straight from the reference drop-shadow. */
  --reader-float-shadow: drop-shadow(0 30px 46px rgba(35, 33, 30, .14));
}

/* ---------- READER GROUND — LIGHT (Rhode putty, the default look) ----------
   Applied by .reader (and any reader-idiom surface) as a LOCAL ground so
   the rest of the page's --ground/--ink are untouched. The reader re-points
   --ground/--ink/--line to these putty values on ITS OWN subtree only, which
   lets shared classes (.rt-spec, .quiz-choice) that read --ground/--ink/--line
   automatically inherit the putty ground with zero per-class edits. */
:root, [data-theme="light"] {
  /* the one cool-putty ground + its slightly lighter companion */
  --reader-ground:   #E7E4DD;   /* reference --paper  */
  --reader-ground-2: #F1EFEA;   /* reference --paper-2 (tips, quiz buttons) */
  /* warm ink trio */
  --reader-ink:      #23211E;   /* reference --ink      */
  /* [tech-a11y contrast, HIGH] --reader-ink-soft #6E6A63 was 4.24:1 on the
     putty ground (#E7E4DD) — borderline-fails AA on .r-label / spec labels.
     Darkened to #67635C = 4.70:1. Dark theme's soft ink unchanged below. */
  --reader-ink-soft: #67635C;   /* was #6E6A63 (4.24:1 → 4.70:1 on putty) */
  /* [tech-a11y contrast, HIGH] --reader-ink-faint #A6A299 was 2.00:1 on putty
     and is used as real TEXT (.r-fin-mono track-recap caption, .r-next-kicker),
     not just non-text decoration — a hard AA fail. Darkened to #68635A =
     4.70:1 so the caption clears AA as text. Dark theme faint unchanged. */
  --reader-ink-faint:#68635A;   /* was #A6A299 (2.00:1 → 4.70:1 on putty) */
  /* the terracotta accent that carries reader eyebrows/labels */
  /* [tech-a11y contrast, HIGH] --reader-clay #A9673F was 3.52:1 on putty — the
     recurring reader eyebrow/kicker signature FAILED AA everywhere in light.
     Darkened to #8F5330 (same terracotta hue) = 4.80:1 on putty, 5.30:1 on
     --reader-ground-2. Dark theme keeps its own lightened clay (#D69A6F) below. */
  --reader-clay:     #8F5330;   /* was #A9673F (3.52:1 → 4.80:1 on putty) */
  /* hairline on the putty ground */
  --reader-line:     rgba(35, 33, 30, .14);   /* reference --line */
  /* the navy CLAIM block ink set (bone type on saturated navy) */
  --reader-claim-bg:   var(--navy);
  --reader-claim-eyebrow: var(--gold);   /* 4.66:1 on the navy claim */
  --reader-claim-ink:  #EAE6DC;   /* bone body on navy */
  --reader-claim-stat: #F3EFE6;   /* brightest bone for the big number */
  --reader-claim-say:  #CFCABE;   /* the one-sentence say */
  --reader-claim-disc: #8E897C;   /* mono fine print */
  /* the emerald "correct" tint reused by the calm reader quiz */
  --reader-correct: #3B7A57;
}

/* ---------- READER GROUND — DARK (navy-ground variant, still Rhode) ----------
   The brief's requirement: dark theme is a NAVY-ground reader that still
   reads Rhode — bone ink, gold/clay accents — and stays AA. We deepen the
   navy a touch below page --navy so bone body clears 4.5:1, and lift the
   claim block to a lighter navy so it still separates from the ground. */
[data-theme="dark"] {
  --reader-ground:   #0B1A2E;   /* deep navy putty-analogue */
  --reader-ground-2: #122744;   /* raised companion (tips, quiz buttons) */
  --reader-ink:      #F1EDE3;   /* bone body — ~13:1 on the deep navy */
  --reader-ink-soft: #B7B1A4;   /* soft bone — ~6.5:1 */
  --reader-ink-faint:#7E8798;   /* faint, still ≥3:1 for non-text */
  --reader-clay:     #D69A6F;   /* lightened clay so it reads on navy (AA) */
  --reader-line:     rgba(241, 237, 227, .16);
  --reader-claim-bg:   #16305A;  /* claim lifts ABOVE the ground here */
  --reader-claim-eyebrow: var(--gold-light);   /* raw --gold failed AA (3.86:1) on the lifted navy; gold-light = 7.4:1 */
  --reader-claim-ink:  #EAE6DC;
  --reader-claim-stat: #F6F2E9;
  --reader-claim-say:  #D6D1C5;
  --reader-claim-disc: #97A0B0;  /* mono fine print, ≥4.5:1 on the lifted navy */
  --reader-correct: #5FB088;     /* brighter emerald for the dark quiz */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* mirror the explicit-dark reader ground for the system-dark path */
    --reader-ground:   #0B1A2E;
    --reader-ground-2: #122744;
    --reader-ink:      #F1EDE3;
    --reader-ink-soft: #B7B1A4;
    --reader-ink-faint:#7E8798;
    --reader-clay:     #D69A6F;
    --reader-line:     rgba(241, 237, 227, .16);
    --reader-claim-bg:   #16305A;
    --reader-claim-eyebrow: var(--gold-light);
    --reader-claim-ink:  #EAE6DC;
    --reader-claim-stat: #F6F2E9;
    --reader-claim-say:  #D6D1C5;
    --reader-claim-disc: #97A0B0;
    --reader-correct: #5FB088;
  }
}