/*
 * Design tokens — the single source of design truth, extracted from
 * mockup/app_full_mockup.html. Components reference these variables only;
 * no component hard-codes a colour or size. (Design ↔ function separation.)
 */
:root {
  /* --- Monochrome scale --- */
  --ink: #111;            /* primary text */
  --ink-soft: #6f6f6f;    /* secondary text */
  --muted: #747679;       /* labels / metadata — WCAG AA 4.56:1 on white (normal text) */
  --muted-2: #9a9c9f;     /* fainter metadata — 2.75:1, incidental/large-text use only, never body copy */
  --line: #d8d8d8;        /* primary border */
  --line-soft: #e6e6e6;   /* inner / lighter border */
  --surface: #fff;        /* cards, panels */
  --surface-2: #fcfcfc;   /* subtle raised */
  --surface-3: #f4f4f4;   /* hover / inset */
  --canvas: #fff;         /* page background (white per design system) */

  /* --- 7-colour functional accent set (section markers only, never decorative) --- */
  --accent-blue: oklch(0.55 0.15 255);
  --accent-green: oklch(0.52 0.13 150);
  --accent-amber: oklch(0.57 0.12 75);  /* deepened from L0.62 → AA 4.57:1 on white; it's used as text, unlike other markers */
  --accent-red: oklch(0.55 0.19 25);
  --accent-purple: oklch(0.52 0.16 305);
  --accent-teal: oklch(0.56 0.11 195);
  --accent-pink: oklch(0.62 0.16 350);

  /* --- Typography --- */
  --font-ui: Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* 036a — the optional "document" serif theme (system stack; Source Serif can be bundled later) */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 18px;

  /* --- Semantic type roles (story 126; owner-approved 16px baseline) ---
     rem-based so browser default-size preferences flow through the product.
     Roles, not sizes: meta = dates/counts/provenance (needs an AA colour when
     meaningful) · ui-compact = navigation, buttons, table cells, secondary
     controls · body = paragraphs, instructions, help text, input content ·
     headings per level (display stays clamp() on the landing only). The old
     size-only tokens above remain for decorative/micro duties. */
  --type-meta: 0.75rem;        /* 12px */
  --type-ui-compact: 0.875rem; /* 14px */
  --type-body: 1rem;           /* 16px */
  --type-heading-sm: 1.125rem; /* 18px */
  --type-heading: 1.5rem;      /* 24px */
  --mono-tracking: 0.04em;
  --mono-tracking-wide: 0.14em;

  /* --- Geometry & spacing --- */
  --radius: 2px;          /* square-ish corners */
  --border: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- Elevation (floating UI only; in-app surfaces stay flat) --- */
  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.10);   /* dropdowns, menus, palette, picker */
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.18); /* centered dialogs + side panels */
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.18);

  /* --- Interaction & state (design review 2026-07-04) --- */
  --focus-ring: 0 0 0 2px color-mix(in oklch, var(--accent-blue) 45%, transparent); /* the one non-mono use: keyboard focus */
  --focus-ring-inset: inset 0 0 0 2px color-mix(in oklch, var(--accent-blue) 22%, transparent); /* inputs — visible but calm */
  --disabled-opacity: 0.5;

  /* Overlays: modals (centered, demand focus) are darker; side panels (contextual) are lighter. */
  --overlay-modal: rgba(0, 0, 0, 0.32);
  --overlay-panel: rgba(0, 0, 0, 0.12);

  /* Callout tints — the only per-variant colours; kept here so a colour audit finds them. */
  --callout-info-bg: oklch(0.975 0.02 245);   --callout-info-edge: oklch(0.6 0.09 250);
  --callout-tip-bg: oklch(0.975 0.025 150);   --callout-tip-edge: oklch(0.58 0.09 150);
  --callout-warn-bg: oklch(0.975 0.03 90);    --callout-warn-edge: oklch(0.66 0.1 80);
  --callout-note-bg: oklch(0.975 0.002 250);  --callout-note-edge: oklch(0.62 0.005 250);

  /* --- Foreground on inverted --ink fills (selected rows, solid buttons, toasts, avatars) ---
     Today all light-on-dark, tuned for --ink = #111 (contrast is ~white-on-#111 ≈ 18.9:1).
     Named as one group so a dark theme can flip --ink and re-derive these together (phase 2)
     instead of chasing literals. Values are verbatim from components.css → zero visual change.
     The audit sketched two steps (~.7 / ~.5); the code actually uses FIVE discrete white alphas,
     kept here as an exact opacity ladder so nothing shifts (see themes.md, Phasing item 1). */
  --on-ink: #fff;                           /* solid light foreground: buttons, toasts, avatars, selected-row text */
  --on-ink-soft: rgba(255, 255, 255, .7);   /* secondary text on --ink (descriptions, leads, bodies) */
  --on-ink-muted: rgba(255, 255, 255, .65); /* labels / keyboard hints on --ink */
  --on-ink-faint: rgba(255, 255, 255, .55); /* tertiary metadata on --ink (section previews, counts, kicker) */
  --on-ink-dim: rgba(255, 255, 255, .5);    /* faintest — step numerals, icon-tile borders on --ink */
  --on-ink-wash: rgba(255, 255, 255, .28);  /* translucent highlight wash on an inverted (selected) row */
  --ink-hover: #000;                        /* the darker press/hover step under a solid --ink button */

  /* --- Photo overlays — deliberately theme-STABLE (they sit on user images, not themed
     surfaces, so a black scrim + white title stay correct on every theme; named only so a
     colour audit stays clean, NOT so they can be re-themed). --- */
  --scrim: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, 0)); /* entry-card image scrim */
  --on-image: #fff;                         /* title text sitting on a photo (under the scrim) */
  --on-image-shadow: rgba(0, 0, 0, .4);     /* legibility shadow under --on-image text */
  --overlay-image: rgba(0, 0, 0, .82);      /* full-screen lightbox scrim — a viewed image sits on it, so theme-stable */
  --lightbox-btn: rgba(0, 0, 0, .4);        /* lightbox close button, resting */
  --lightbox-btn-hover: rgba(0, 0, 0, .65); /* lightbox close button, hover */
  --lightbox-btn-line: rgba(255, 255, 255, .35); /* lightbox close button hairline on the dark scrim */

  /* --- Search + text-marker tints --- */
  --search-hit: rgba(245, 197, 24, .55);    /* ::highlight(atomo-search-hit) — find-style yellow mark */
  /* Highlighter (text-marker) tints — light washes tuned for a white canvas; a dark theme
     re-tints these to ~L0.23 with light text preserved via color: inherit (phase 2). */
  --mark-yellow: oklch(0.93 0.085 90);
  --mark-green: oklch(0.93 0.06 150);
  --mark-blue: oklch(0.93 0.055 245);
  --mark-rose: oklch(0.92 0.06 12);
  --mark-grey: oklch(0.93 0.004 250);

  /* --- Cover Studio canvas — read at draw time by frontend/src/components/cover/runtime.ts
     via getComputedStyle. That wiring is owned by the theme-infrastructure phase; here we
     only DEFINE the tokens. --cover-accent mirrors the design-sanctioned cover red (#C43A20). */
  --cover-ink: #16161a;
  --cover-accent: #C43A20;
}

/*
 * ============ Theme: Ink (dark) — documents/themes.md, phase 2 ============
 *
 * A theme is a lighting condition, not a skin: this block overrides VALUES of
 * color-bearing tokens only. Geometry, spacing and type tokens are never
 * overridden. The attribute-less document is Paper (the :root block above);
 * `<html data-theme="ink">` — set pre-paint by the index.html boot script and
 * managed by src/lib/theme.ts — flips the whole app.
 *
 * Not a naive invert: the canvas sits at L 0.17 (pure black + pure white
 * halate); --surface goes a step LIGHTER than canvas because dark UIs signal
 * elevation by lightening (shadows carry almost nothing on dark, so borders +
 * lighter surfaces do the work and shadow alphas rise). Accents keep their
 * hues, shift to L 0.68–0.75 with chroma eased ~10–15% (dark-bg colors bloom).
 *
 * All contrast ratios below are computed (WCAG 2.x relative luminance), not
 * eyeballed — duties per themes.md: accents-as-text ≥ 4.5:1 on --surface,
 * markers ≥ 3:1, --muted readable as normal text.
 */
:root[data-theme="ink"] {
  /* Native form controls, scrollbars and pickers follow the darkness. */
  color-scheme: dark;

  /* --- Monochrome scale (surface LIGHTER than canvas — elevation by light) --- */
  --ink: oklch(0.93 0.004 260);         /* #e6e8ea — 14.58:1 on --surface */
  --ink-soft: oklch(0.76 0.005 260);    /* #afb1b4 —  8.34:1 on --surface */
  --muted: oklch(0.72 0.006 260);       /* #a2a5a8 — AA 7.22:1 on --surface (normal text) */
  --muted-2: oklch(0.6 0.006 260);      /* #7e8084 — 4.54:1; incidental/large-text duty (Paper's is 2.75) */
  --line: oklch(0.32 0.008 260);        /* #303337 — lines lifted; borders carry elevation on dark */
  --line-soft: oklch(0.28 0.007 260);   /* #27292c */
  --surface: oklch(0.205 0.006 260);    /* #16171a — cards/panels, one step ABOVE canvas */
  --surface-2: oklch(0.225 0.006 260);  /* #1a1c1f — subtle raised */
  --surface-3: oklch(0.26 0.007 260);   /* #222427 — hover / inset */
  --canvas: oklch(0.17 0.005 260);      /* #0e0f12 — page bg; this hex IS the theme-color meta
                                           (index.html boot script + INK_THEME_COLOR in lib/theme.ts) */

  /* --- 7 accents: same hues, L 0.68–0.75, chroma −10–15%. Ratios vs --surface #16171a;
         duty T (text, .fc-*/chips) ≥ 4.5:1 · duty M (dots/edges/icons) ≥ 3:1 — all pass. --- */
  --accent-blue: oklch(0.72 0.13 255);   /* #6aa7f4 — 7.22:1  T ✓ M ✓ */
  --accent-green: oklch(0.72 0.11 150);  /* #6fb880 — 7.55:1  T ✓ M ✓ */
  --accent-amber: oklch(0.75 0.1 75);    /* #d3a563 — 7.95:1  T ✓ M ✓ (text duty, like Paper) */
  --accent-red: oklch(0.7 0.16 25);      /* #f2716a — 6.25:1  T ✓ M ✓ */
  --accent-purple: oklch(0.7 0.14 305);  /* #b386e4 — 6.36:1  T ✓ M ✓ */
  --accent-teal: oklch(0.73 0.095 195);  /* #54baba — 7.80:1  T ✓ M ✓ */
  --accent-pink: oklch(0.74 0.135 350);  /* #ea85b7 — 7.29:1  T ✓ M ✓ */

  /* --- Elevation: shadow alphas rise (rgba-black shadows vanish on dark otherwise). --- */
  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.55);

  /* --- Focus ring: the Paper mix (45%) blends to ~2.45:1 against this surface; 60%
         reaches 3.39:1 (≥ 3:1 non-text). Inset mix raised 22% → 34% in proportion. --- */
  --focus-ring: 0 0 0 2px color-mix(in oklch, var(--accent-blue) 60%, transparent);
  --focus-ring-inset: inset 0 0 0 2px color-mix(in oklch, var(--accent-blue) 34%, transparent);

  /* Overlays: a dark app needs a heavier veil to read as "behind". */
  --overlay-modal: rgba(0, 0, 0, 0.55);
  --overlay-panel: rgba(0, 0, 0, 0.35);

  /* --- Callout tints: the L 0.975 washes flip to L ≈ 0.23 washes, same hues; edges
         lifted. Edge vs its wash / vs --surface (both ≥ 3:1); --ink body text ≥ 13:1
         on every wash. --- */
  --callout-info-bg: oklch(0.23 0.025 245);  --callout-info-edge: oklch(0.68 0.1 250);   /* edge 5.88 / 6.25 */
  --callout-tip-bg: oklch(0.23 0.03 150);    --callout-tip-edge: oklch(0.66 0.1 150);    /* edge 5.62 / 6.01 */
  --callout-warn-bg: oklch(0.24 0.035 90);   --callout-warn-edge: oklch(0.72 0.11 80);   /* edge 6.56 / 7.14 */
  --callout-note-bg: oklch(0.23 0.004 250);  --callout-note-edge: oklch(0.66 0.006 250); /* edge 5.43 / 5.76 */

  /* --- Semantic tokens from the phase-1 cleanup, flipped for a LIGHT --ink ---
     On Ink, var(--ink) fills are light, so text on them must be dark. */
  --on-ink: oklch(0.19 0.005 260);              /* #121416 — 15.03:1 on the ink fill */
  --on-ink-soft: oklch(0.19 0.005 260 / 0.72);  /* 6.66:1 effective on the ink fill */
  --on-ink-muted: oklch(0.19 0.005 260 / 0.67); /* labels / keyboard hints — mirrors Paper's .65 step */
  --on-ink-faint: oklch(0.19 0.005 260 / 0.55); /* 3.85:1 — large/incidental duty only, mirroring Paper */
  --on-ink-dim: oklch(0.19 0.005 260 / 0.5);    /* faintest — step numerals, icon-tile borders */
  --on-ink-wash: oklch(0.19 0.005 260 / 0.28);  /* translucent highlight wash on an inverted (selected) row */
  --ink-hover: #fff;                            /* solid-button hover steps LIGHTER (Paper steps to #000) */
  /* --scrim and --on-image are deliberately NOT overridden — photo overlays are
     theme-stable (black scrim + white title work on photos regardless of theme). */
  --search-hit: oklch(0.45 0.09 85 / 0.55);     /* dark amber wash; --ink text over it 9.49:1 */

  /* Text marks (.mk-*): dark tints, same hues; text stays color:inherit (--ink) — ≥ 9.5:1 on all. */
  --mark-yellow: oklch(0.34 0.055 90);  /* #433612 — ink text 9.58:1 */
  --mark-green: oklch(0.32 0.05 150);   /* #1f3a25 — ink text 10.11:1 */
  --mark-blue: oklch(0.32 0.045 255);   /* #23344a — ink text 10.32:1 */
  --mark-rose: oklch(0.32 0.05 10);     /* #49282d — ink text 10.56:1 */
  --mark-grey: oklch(0.32 0.004 260);   /* #323335 — ink text 10.32:1 */

  /* --- Cover Studio re-ink: read by cover/runtime.ts via getComputedStyle at glyph-atlas
         build time. Hex (not oklch) so canvas fillStyle needs no color-space support. --- */
  --cover-ink: #e6e8ea;    /* ≈ this theme's --ink — 14.58:1 on --surface */
  --cover-accent: #e6705f; /* the Ink-tuned cover red (oklch 0.68 0.15 30): #C43A20 with L raised,
                              chroma eased — 5.83:1 on --surface (owner-approved Ink variant) */
}

/*
 * Sepia (wave 2, story 108) — warm paper: cream canvas, soft-black ink. A tint, not a
 * second design system: accents (bar amber), callouts, marks, shadows, overlays, search
 * hit and the cover pair all keep Paper's values — the wash is too faint to move their
 * contrast. Only the neutrals warm up, and amber deepens one step because it ships as
 * TEXT: Paper's L 0.57 lands 4.23:1 on this surface (AA fail); L 0.55 restores 4.60:1.
 * theme-color meta mirrors --canvas: #f9f5ec (lib/theme.ts THEME_COLOR — keep in sync).
 */
:root[data-theme="sepia"] {
  color-scheme: light;
  --canvas: oklch(0.97 0.012 85);       /* #f9f5ec — cream page */
  --surface: oklch(0.975 0.01 85);      /* #faf6ef — cards a touch lighter than canvas */
  --surface-2: oklch(0.965 0.012 85);
  --surface-3: oklch(0.935 0.014 85);
  --ink: #1c1b19;         /* soft black (the "paper" code-theme ink) — 15.98:1 on --surface */
  --ink-soft: #6e6a62;
  --muted: #746f64;       /* 4.64:1 on --surface — keeps Paper's AA duty */
  --muted-2: #9c9588;     /* 2.76:1 — incidental/large only, mirroring Paper's 2.75 */
  --line: oklch(0.87 0.02 85);
  --line-soft: oklch(0.905 0.016 85);
  --accent-amber: oklch(0.55 0.12 75);  /* deepened 0.57 → 0.55: AA text (4.60:1) on cream */
  /* The ink fill is still dark, so light-on-ink text stays — tinted to this paper
     (same alpha ladder as Paper's white one). */
  --on-ink: oklch(0.97 0.012 85);
  --on-ink-soft: oklch(0.97 0.012 85 / 0.7);
  --on-ink-muted: oklch(0.97 0.012 85 / 0.65);
  --on-ink-faint: oklch(0.97 0.012 85 / 0.55);
  --on-ink-dim: oklch(0.97 0.012 85 / 0.5);
  --on-ink-wash: oklch(0.97 0.012 85 / 0.28);
}

/*
 * Mist (wave 2, story 108) — cool light: the faintest blue-grey cast. Same discipline as
 * Sepia: neutrals only; accents/callouts/marks/shadows/covers keep Paper's values; amber
 * nudged 0.57 → 0.56 to hold AA text (4.55:1) on the cool surface. The near-black ink
 * fill keeps Paper's white on-ink ladder — no override. theme-color meta: #f5f7f9.
 */
:root[data-theme="mist"] {
  color-scheme: light;
  --canvas: oklch(0.975 0.004 250);     /* #f5f7f9 — cool page */
  --surface: oklch(0.985 0.003 250);    /* #f9fafc — cards a touch lighter than canvas */
  --surface-2: oklch(0.975 0.004 250);
  --surface-3: oklch(0.945 0.006 250);
  --ink: #14161a;         /* 17.34:1 on --surface */
  --ink-soft: #696d74;
  --muted: #70747b;       /* 4.50:1 on --surface — AA held exactly */
  --muted-2: #969aa1;     /* 2.70:1 — incidental/large only */
  --line: oklch(0.875 0.008 250);
  --line-soft: oklch(0.91 0.006 250);
  --accent-amber: oklch(0.56 0.12 75);  /* 4.55:1 — Paper's 0.57 lands 4.37 here (AA fail) */
}

/*
 * Vivid (story 109) — "color has more room". NOT a lighting condition: same Paper
 * NEUTRALS (canvas/ink/lines untouched), same geometry and type. What changes is only
 * the color half of the system: the 7 accents keep their HUE and LIGHTNESS but gain
 * ~25–30% chroma, and the derived tints (callouts, marks) go from whisper to confident.
 * Because L is unchanged, every contrast duty is preserved verbatim — amber stays the one
 * text-duty accent at 4.56:1 on white, teal/pink stay marker-only (as they already are on
 * Paper). The louder accents then get NEW meaning-bearing duties via component rules
 * (section washes on header/nav, tinted label chips) — see components.css §Vivid. Color
 * still only ever marks section/label identity; Vivid raises its volume, not its vocabulary.
 * --canvas stays #ffffff (THEME_COLOR.vivid in lib/theme.ts). All 7 accents verified
 * in-gamut and contrast-checked; boosted callout/mark tints stay light enough for ink text.
 */
:root[data-theme="vivid"] {
  color-scheme: light;
  /* 7 accents — same L, same hue, C +~25–30% (in-sRGB-gamut, duties preserved) */
  --accent-blue: oklch(0.55 0.19 255);   /* #006edc — 4.92:1 text on white */
  --accent-green: oklch(0.52 0.16 150);  /* #008130 — 5.04:1 */
  --accent-amber: oklch(0.57 0.15 75);   /* #a96600 — 4.56:1, the one text-duty accent */
  --accent-red: oklch(0.55 0.23 25);     /* #d8001e — 5.35:1 */
  --accent-purple: oklch(0.52 0.20 305); /* #853dc2 — 6.11:1 */
  --accent-teal: oklch(0.56 0.14 195);   /* #008c8e — 4.09:1, marker-only (as on Paper) */
  --accent-pink: oklch(0.62 0.20 350);   /* #d84497 — 4.05:1, marker-only */
  /* Confident callout tints: bg chroma ~×3 vs Paper, still light (ink body text ≥ 11:1) */
  --callout-info-bg: oklch(0.955 0.055 245);  --callout-info-edge: oklch(0.58 0.14 250);
  --callout-tip-bg: oklch(0.955 0.06 150);    --callout-tip-edge: oklch(0.55 0.14 150);
  --callout-warn-bg: oklch(0.955 0.07 90);    --callout-warn-edge: oklch(0.63 0.15 80);
  --callout-note-bg: oklch(0.965 0.012 250);  --callout-note-edge: oklch(0.60 0.02 250);
  /* Confident text marks: C boosted, L held ~0.90 so ink text stays ≥ 11:1 */
  --mark-yellow: oklch(0.90 0.15 90);
  --mark-green: oklch(0.90 0.13 150);
  --mark-blue: oklch(0.90 0.12 245);
  --mark-rose: oklch(0.89 0.13 12);
  --mark-grey: oklch(0.92 0.01 250);
}