/* Second Look: the design tokens every page reads, and the two faces the workspace is set in.
   Layer 1 of 5 (docs/FRONTEND-ARCHITECTURE.md): tokens, base, components, shell, pages. Nothing
   here draws anything; a colour, size or timing used in more than one place is named here once.

   Built to the owner's presentation deck (2026-09-30), so the product and the slides read as one
   thing: a near-black ground with a faint grid, thin-bordered panels, one cyan accent kept for the
   figure that matters, and status as a mark plus a word. Two themes in that one language: dark on
   :root, the default, and light under :root[data-theme="light"], set before the first paint by
   app/js/theme.js from the reader's saved choice. Every other stylesheet reads tokens only, so both
   themes reach every page. The faces, self-hosted from app/fonts/ because the
   Content-Security-Policy (default-src 'self') keeps every file on this server:
   - Sora, variable 100 to 800: every word of the interface, titles and headings.
   - IBM Plex Mono, 400 and 500: figures, numbers, labels and technical values, tabular.
   Each file's SIL Open Font License is beside it in app/fonts/.

   Contrast, measured with the WCAG formula against --sheet. Dark (#0C1018): --ink 16.1:1, --ink-2
   7.5:1, --dim 6.2:1, --sig 12.1:1, --ok 9.2:1, --warn 11.3:1, --bad 6.2:1, --field-edge 3.4:1.
   Light (#FFFFFF): --ink 18.7:1, --ink-2 8.1:1, --dim 6.0:1, --sig 6.2:1, --ok 5.3:1, --warn 5.8:1,
   --bad 6.6:1, --field-edge 3.6:1; each status word stays above 4.5:1 on its own tint. --faint
   (3.2:1 dark, 2.3:1 light) is decoration only: a ring, a border, a disabled control, never text. */

@font-face {
  font-family: "Sora";
  src: url("/static/fonts/Sora-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Grounds and surfaces, darkest first. --canvas is the deck's ground; --sheet its panel. */
  --canvas: #07090F;
  --doc: #0A0D15;       /* a source passage: an inset well, a step below the panel */
  --sheet: #0C1018;
  --chrome: #101521;    /* a quiet surface or a hover inside a panel */
  --viewer: #151B28;
  /* The memo: a dark sheet, the deck's own panel, so the memo reads as the same product as the
     slides. Print turns it into black ink on white paper (below). */
  --paper: #0D1119;
  --paper-ink: #E8ECF3;

  /* Ink, strongest first. --faint is decoration only. */
  --ink: #E8ECF3;
  --ink-2: #9AA3B5;
  --dim: #8A93A4;       /* the deck's #5B6472 is 3.2:1, too low for words; lifted to 6.2:1 */
  --faint: #5B6472;

  /* Lines. A field's edge is a boundary a reader needs, so it is held to 3:1. */
  --rule: rgba(232, 236, 243, .09);
  --rule-2: rgba(232, 236, 243, .18);
  --field-edge: rgba(232, 236, 243, .40);

  /* The sidebar: a step off the ground, the same ink. */
  --nav: #0A0D14;
  --nav-ink: #9AA3B5;
  --nav-ink-strong: #E8ECF3;
  --nav-hover: #10141F;
  --nav-active: #151B29;
  --nav-edge: rgba(232, 236, 243, .10);
  --nav-meta: #8A93A4;
  --nav-dim: #8790A2;

  /* The one accent. --sig is the deck's cyan; --sig-light the deeper cyan for a focused field's
     edge and a bar; --accent-line and --sig-soft the highlighted card's border and tint. Text on a
     cyan or ink fill is --on-accent. */
  --sig: #38E1FF;
  --sig-hover: #86EDFF;
  --sig-soft: rgba(56, 225, 255, .10);
  --sig-light: #1FA3BF;
  --accent-line: rgba(56, 225, 255, .45);
  --on-accent: #07090F;

  /* Status: a mark plus a word, never hue alone. Told apart by lightness too: amber is the lightest
     (L .57), green the middle (L .46), coral the darkest (L .29). A reviewer's other view is amber
     and quiet, never coral. Surfaces are a tint of the status over the panel. */
  --ok: #52C98F; --ok-dot: #52C98F; --ok-surface: rgba(82, 201, 143, .10); --ok-edge: rgba(82, 201, 143, .38);
  --warn: #F0C060; --warn-dot: #F0C060; --warn-surface: rgba(240, 192, 96, .10); --warn-edge: rgba(240, 192, 96, .38);
  --bad: #EE6A5C; --bad-dot: #EE6A5C; --bad-surface: rgba(238, 106, 92, .10); --bad-edge: rgba(238, 106, 92, .42);
  --pending-dot: #5B6472;

  /* A cited cell or line: the deck's highlighted card, a cyan edge over a soft cyan tint. */
  --cited: rgba(56, 225, 255, .10);
  --cited-edge: rgba(56, 225, 255, .45);
  --cited-flash: rgba(56, 225, 255, .35);

  /* The deck's ground: a faint 48 px grid, on the main column only. */
  --grid-line: rgba(232, 236, 243, .028);
  --grid-size: 48px;

  /* The faces. Titles and figures used to be a serif; the deck sets titles in Sora and figures in
     Plex Mono, so --font-serif and --font-doc now name Sora and .fig names the mono (base.css). */
  --font-ui: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: var(--font-ui);
  --font-doc: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Figures in a column line up: lining, tabular numerals. */
  --figure-numerals: lining-nums tabular-nums;

  /* The type scale of the workspace redesign, size over line height. The role classes that use
     them are in base.css (.t-display to .t-micro); a page uses a role, not a raw size. */
  --type-display-size: 44px; --type-display-line: 52px;   /* 500 */
  --type-title-size: 28px;   --type-title-line: 34px;     /* 600 */
  --type-section-size: 20px; --type-section-line: 28px;   /* 600 */
  --type-sub-size: 16px;     --type-sub-line: 24px;       /* 600 */
  --type-body-size: 15px;    --type-body-line: 24px;
  --type-small-size: 13px;   --type-small-line: 20px;
  --type-micro-size: 12px;   --type-micro-line: 16px;     /* 500 */

  /* The Review page's own sizes, kept as they were (review.css reads these). */
  --size-label: 11px;
  --size-meta: 12px;
  --size-sm: 13px;
  --size-body: 14px;
  --size-base: 14px;
  --size-lg: 16px;
  --size-title: 20px;
  --size-question: 26px;
  --size-figure: 44px;
  --size-doc: 14px;

  --lh-tight: 1.25;
  --lh-ui: 1.5;
  --lh-copy: 1.55;
  --lh-doc: 1.7;

  /* A section key is the deck's eyebrow: mono capitals, spaced, flush left. */
  --track-label: .12em;
  --track-title: -.018em;

  /* One spacing scale, in steps of four. */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px;
  --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px;
  --space-11: 48px; --space-12: 64px;

  /* The frame (shell.css): the sidebar, the top bar. */
  --strip-width: 64px;
  --panel-width: 272px;
  --topbar-height: 56px;
  --column: 820px;
  --doc-measure: 660px;
  /* A page's own content: full width, with a gutter that grows with the window. */
  --page-gutter: clamp(24px, 3vw, 48px);

  --radius-xs: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* On the dark ground a panel is drawn by its border; shadows only lift what floats. */
  --shadow-card: none;
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, .45);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 236, 243, .06);
  --backdrop: rgba(3, 5, 9, .70);
  /* One motion system: short, eased out, and off under reduced motion (base.css). */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  /* A page arriving (motion.js enterPage, base.css "entrance"): each element marked data-enter
     starts --enter-step after the one before it; a rise or a fade runs --enter-dur, a bar or a
     column draws for --enter-draw. motion.js mirrors --enter-step and --enter-draw by name. */
  --enter-dur: 260ms;
  --enter-draw: 420ms;
  --enter-step: 70ms;
  --enter-ease: cubic-bezier(.2, .8, .2, 1);
  --enter-rise: 8px;
  /* The live run's motion (the workpaper design and its motion spec, approved 2026-09-29). Only
     transform and opacity move, plus stroke-dashoffset for ticks and scale for tracks and rules. */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-fast: 160ms;     /* a ring collapses when its step completes */
  --motion-step: 200ms;     /* a status line cross-fades, a reveal, a dot fills */
  --motion-tick: 360ms;     /* every tick draws */
  --motion-fill: 420ms;     /* a progress track fills across a finished station */
  --motion-surface: 420ms;  /* the answer band rises */
  --motion-word: 460ms;     /* the question's words rise behind a mask */
  --motion-digit: 380ms;    /* the answer figure's characters rise */
  --motion-fly: 520ms;      /* figures travel from the analyst onto the tape */
  --motion-rule: 300ms;     /* tape rules and the double underline are drawn */
  --motion-total: 560ms;    /* the total line is ruled across the page */
  --loop-pulse: 1600ms;     /* the running dot's ring grows and fades */
  --loop-run: 1400ms;       /* a highlight slides along the running station's track */
  --loop-breathe: 2400ms;   /* the You station waits */
}

/* ---------- the light theme ----------
   The same design on a light ground: ink on a pale grey, white panels, the accent darkened to a deep
   cyan so words in it pass 4.5:1, and the status colours darkened for the same reason. The memo's
   sheet follows the theme: white paper here, the dark panel in the dark theme. */
:root[data-theme="light"] {
  color-scheme: light;

  --canvas: #F6F7F9;
  --doc: #F8F9FB;
  --sheet: #FFFFFF;
  --chrome: #F1F3F6;
  --viewer: #E8EBF0;
  --paper: #FFFFFF;
  --paper-ink: #0B1220;

  --ink: #0B1220;
  --ink-2: #465063;
  --dim: #5A6474;
  --faint: #A3ABB7;

  --rule: rgba(11, 18, 32, .10);
  --rule-2: rgba(11, 18, 32, .18);
  --field-edge: rgba(11, 18, 32, .50);

  --nav: #FFFFFF;
  --nav-ink: #465063;
  --nav-ink-strong: #0B1220;
  --nav-hover: #F1F3F6;
  --nav-active: #E9EDF2;
  --nav-edge: rgba(11, 18, 32, .12);
  --nav-meta: #5A6474;
  --nav-dim: #5A6474;

  --sig: #0B6A85;
  --sig-hover: #084F63;
  --sig-soft: rgba(11, 106, 133, .08);
  --sig-light: #0891B2;
  --accent-line: rgba(11, 106, 133, .45);
  --on-accent: #FFFFFF;

  /* On a light ground every status word must be dark to pass, so lightness can differ only in the
     marks: amber the lightest, green the middle, red the darkest. The words and icons carry it. */
  --ok: #1B7A4B; --ok-dot: #25935A; --ok-surface: rgba(27, 122, 75, .08); --ok-edge: rgba(27, 122, 75, .35);
  --warn: #8F5A00; --warn-dot: #C27C0E; --warn-surface: rgba(194, 124, 14, .10); --warn-edge: rgba(143, 90, 0, .35);
  --bad: #B42318; --bad-dot: #B42318; --bad-surface: rgba(180, 35, 24, .07); --bad-edge: rgba(180, 35, 24, .35);
  --pending-dot: #A3ABB7;

  --cited: rgba(11, 106, 133, .08);
  --cited-edge: rgba(11, 106, 133, .45);
  --cited-flash: rgba(11, 106, 133, .28);

  --grid-line: rgba(11, 18, 32, .04);

  --shadow-card: 0 1px 2px rgba(11, 18, 32, .05);
  --shadow-raised: 0 12px 32px rgba(11, 18, 32, .10);
  --shadow-pop: 0 12px 32px rgba(11, 18, 32, .14), 0 0 0 1px rgba(11, 18, 32, .04);
  --backdrop: rgba(11, 18, 32, .35);
}

/* On paper: black ink on white, whatever the screen shows. */
@media print {
  :root {
    color-scheme: light;
    --canvas: #FFFFFF; --doc: #FFFFFF; --sheet: #FFFFFF; --chrome: #F4F5F7; --viewer: #ECEEF1;
    --paper: #FFFFFF; --paper-ink: #111418;
    --ink: #111418; --ink-2: #3D4450; --dim: #5A6270; --faint: #9AA1AC;
    --rule: #DDE1E6; --rule-2: #C6CCD3; --field-edge: #8A929D;
    --sig: #0B6F85; --sig-soft: #E6F4F7; --accent-line: #0B6F85; --on-accent: #FFFFFF;
    --ok: #1F6E48; --warn: #8A5D0A; --bad: #A12F22;
    --cited: #E6F4F7; --cited-edge: #0B6F85;
    --grid-line: transparent;
  }
}