/* A Rough Idea · design system v2 · tokens
 *
 * Three layers. Primitives (--ds-p-*) are the raw values. Roles (--ds-*) say what a value is
 * for. Components (components.css) use roles only, and so do apps: never a primitive and never
 * a literal value. Changing a role here changes every app that links v2.
 *
 * This is the only file in v2 that holds literal values (scripts/test-v2-literals.mjs checks).
 * The look is the frame of TJ's books: white paper, ink and grays, no accent color;
 * Archivo for structure, IBM Plex Sans for the interface, IBM Plex Mono for what the model wrote.
 */

/* ── Primitives ─────────────────────────────────────────────────────────── */
:root {
  /* Ink and grays, from TJ's books (thomasjmcleish book.css). */
  --ds-p-ink-900: #141716;
  --ds-p-ink-700: #2c312f;
  --ds-p-ink-600: #545b58;
  --ds-p-ink-500: #6b726f;

  /* Between 500 and 300 on the same line: the lightest that keeps 3:1 on paper and on sunk,
     for a field's edge (WCAG 1.4.11). Close to the books' #8a918e, which falls short on sunk. */
  --ds-p-ink-400: #878e8b;
  --ds-p-ink-300: #b5bbb8;
  --ds-p-ink-200: #d5d9d7;

  /* A tool page's ground (proposed, open for TJ): 1.22:1 against paper, so a paper panel reads
     as its own sheet at a glance; ink-50, at 1.10:1, was too faint. Text keeps 14.8:1 on it and
     Text 2 keeps 5.7:1. */
  --ds-p-ink-150: #e6e9e7;
  --ds-p-ink-100: #eceeed;
  --ds-p-ink-50: #f2f4f3;
  --ds-p-paper: #ffffff;

  /* The same ramp for dark. Its darkest step, 975, is a tool page's ground at night (proposed,
     open for TJ): the ground drops below the panels, 1.12:1, so the panels and everything in
     them keep their colors. */
  --ds-p-night-975: #0c0e0d;
  --ds-p-night-950: #121413;
  --ds-p-night-900: #181b1a;
  --ds-p-night-800: #232826;
  --ds-p-night-700: #2e3331;
  --ds-p-night-600: #3a403e;
  --ds-p-night-400: #7d8582;
  --ds-p-night-300: #a9b0ad;
  --ds-p-night-100: #e9ecea;

  /* State. Each always travels with a word ("Raw", "Failed"): never color alone. */
  --ds-p-green-700: #1a7f37;
  --ds-p-green-300: #4ac26b;
  --ds-p-amber-800: #9a4708;
  --ds-p-amber-300: #d9a13b;
  --ds-p-red-700: #b42318;
  --ds-p-red-300: #f2786d;

  /* Viridis, ten stops (llm-explorables shared/ProbabilityScale.js): the one scale for ordered
     data. Its lightness rises steadily, so its order survives color blindness and grayscale. */
  --ds-p-viridis-0: #440154;
  --ds-p-viridis-1: #482878;
  --ds-p-viridis-2: #3e4a89;
  --ds-p-viridis-3: #31688e;
  --ds-p-viridis-4: #26828e;
  --ds-p-viridis-5: #1f9e89;
  --ds-p-viridis-6: #35b779;
  --ds-p-viridis-7: #6ece58;
  --ds-p-viridis-8: #b5de2b;
  --ds-p-viridis-9: #fde725;

  /* Viridis in gray: each step has the same lightness (CIELAB L*) as the viridis stop above it,
     with the inks' slight green cast, so a chart reads the same in grayscale and print. */
  --ds-p-gray-0: #222625;
  --ds-p-gray-1: #363b39;
  --ds-p-gray-2: #4a504d;
  --ds-p-gray-3: #5e6562;
  --ds-p-gray-4: #717875;
  --ds-p-gray-5: #878e8b;
  --ds-p-gray-6: #9da3a0;
  --ds-p-gray-7: #b4bab7;
  --ds-p-gray-8: #cbd0ce;
  --ds-p-gray-9: #e3e5e4;

  /* Type. */
  --ds-p-font-archivo: Archivo, "Helvetica Neue", Arial, sans-serif;
  --ds-p-font-plex-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --ds-p-font-plex-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ds-p-size-11: 11px;
  --ds-p-size-12: 12px;
  --ds-p-size-13: 13px;
  --ds-p-size-14: 14px;
  --ds-p-size-16: 16px;
  --ds-p-size-17: 17px;
  --ds-p-size-20: 20px;
  --ds-p-size-24: 24px;
  --ds-p-size-28: 28px;
  --ds-p-size-32: 32px;
  --ds-p-size-48: 48px;
  --ds-p-size-56: 56px;

  /* Space, in steps of 8 (4 for tight places). */
  --ds-p-space-4: 4px;
  --ds-p-space-8: 8px;
  --ds-p-space-12: 12px;
  --ds-p-space-16: 16px;
  --ds-p-space-24: 24px;
  --ds-p-space-32: 32px;
  --ds-p-space-48: 48px;
  --ds-p-space-64: 64px;
  --ds-p-space-72: 72px;
  --ds-p-space-96: 96px;

  /* Corners. */
  --ds-p-radius-0: 0;
  --ds-p-radius-3: 3px;
  --ds-p-radius-4: 4px;
  --ds-p-radius-5: 5px;
  --ds-p-radius-8: 8px;
  --ds-p-radius-round: 999px;

  /* Lines and sizes. */
  --ds-p-line-1: 1px;
  --ds-p-line-2: 2px;
  --ds-p-height-32: 32px;
  --ds-p-height-44: 44px;
  --ds-p-height-56: 56px;
  --ds-p-width-688: 688px;
  --ds-p-width-1280: 1280px;
  --ds-p-width-1440: 1440px;

  /* Whole lines of whatever text uses them: lh is the element's own line height, so a
     reserved place follows the type it holds, in every context. */
  --ds-p-lines-1: 1lh;
  --ds-p-lines-2: 2lh;

  /* The one shadow, and the dimmed page behind a dialog. */
  --ds-p-shadow-paper: rgb(20 23 22 / 14%);
  --ds-p-shadow-night: rgb(0 0 0 / 50%);
  --ds-p-scrim-paper: rgb(20 23 22 / 40%);
  --ds-p-scrim-night: rgb(0 0 0 / 60%);

  /* Times. */
  --ds-p-time-900: 900ms;

  /* Layers, lowest first. */
  --ds-p-layer-1: 10;
  --ds-p-layer-2: 20;
  --ds-p-layer-3: 30;

  /* ── Roles: light (the default) ─────────────────────────────────────── */

  /* Surfaces and ink. */
  --ds-bg: var(--ds-p-paper);
  --ds-surface: var(--ds-p-paper);
  --ds-surface-sunk: var(--ds-p-ink-50);
  --ds-ground: var(--ds-bg);
  --ds-ground-tool: var(--ds-p-ink-150);
  --ds-text: var(--ds-p-ink-900);
  --ds-text-2: var(--ds-p-ink-600);
  --ds-text-3: var(--ds-p-ink-500);
  --ds-rule: var(--ds-p-ink-200);
  --ds-rule-soft: var(--ds-p-ink-100);
  --ds-rule-strong: var(--ds-p-ink-900);
  --ds-field-border: var(--ds-p-ink-400);
  --ds-ink: var(--ds-p-ink-900);
  --ds-on-ink: var(--ds-p-paper);
  --ds-hover: var(--ds-p-ink-50);
  --ds-focus: var(--ds-p-ink-900);
  --ds-ok: var(--ds-p-green-700);
  --ds-warn: var(--ds-p-amber-800);
  --ds-bad: var(--ds-p-red-700);

  /* Data: the only place color is free. */
  --ds-data-0: var(--ds-p-viridis-0);
  --ds-data-1: var(--ds-p-viridis-1);
  --ds-data-2: var(--ds-p-viridis-2);
  --ds-data-3: var(--ds-p-viridis-3);
  --ds-data-4: var(--ds-p-viridis-4);
  --ds-data-5: var(--ds-p-viridis-5);
  --ds-data-6: var(--ds-p-viridis-6);
  --ds-data-7: var(--ds-p-viridis-7);
  --ds-data-8: var(--ds-p-viridis-8);
  --ds-data-9: var(--ds-p-viridis-9);

  /* The same order in gray, step for step: for print, for a quiet chart, or beside viridis. */
  --ds-data-gray-0: var(--ds-p-gray-0);
  --ds-data-gray-1: var(--ds-p-gray-1);
  --ds-data-gray-2: var(--ds-p-gray-2);
  --ds-data-gray-3: var(--ds-p-gray-3);
  --ds-data-gray-4: var(--ds-p-gray-4);
  --ds-data-gray-5: var(--ds-p-gray-5);
  --ds-data-gray-6: var(--ds-p-gray-6);
  --ds-data-gray-7: var(--ds-p-gray-7);
  --ds-data-gray-8: var(--ds-p-gray-8);
  --ds-data-gray-9: var(--ds-p-gray-9);
  --ds-data-track: var(--ds-surface-sunk);

  /* Type: Archivo for the page's structure, Plex Sans for the interface, Plex Mono for what the
     model produced (tokens, output, data). Labels are sentence case in the text face (TJ, October 24);
     --ds-font-label and --ds-case-label hold that choice in two lines. */
  --ds-font-display: var(--ds-p-font-archivo);
  --ds-font-text: var(--ds-p-font-plex-sans);
  --ds-font-mono: var(--ds-p-font-plex-mono);
  --ds-font-label: var(--ds-p-font-plex-sans);
  --ds-case-label: none;
  --ds-display-stretch: 88%;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-display: 640;
  --ds-type-label: var(--ds-p-size-13);
  --ds-type-caption: var(--ds-p-size-12);
  --ds-type-small: var(--ds-p-size-13);
  --ds-type-ui: var(--ds-p-size-14);
  --ds-type-body: var(--ds-p-size-16);
  --ds-type-lede: var(--ds-p-size-20);
  --ds-type-h3: var(--ds-p-size-20);
  --ds-type-h2: var(--ds-p-size-28);
  --ds-type-h1: var(--ds-p-size-48);
  --ds-type-chrome: var(--ds-p-size-14);
  --ds-type-arrow: var(--ds-p-size-28);
  --ds-leading-tight: 1.1;
  --ds-leading-ui: 1.4;
  --ds-leading-body: 1.6;
  --ds-tracking-label: 0;
  --ds-tracking-wordmark: 0.16em;
  --ds-underline-offset: 0.2em;

  /* Space. */
  --ds-space-1: var(--ds-p-space-4);
  --ds-space-2: var(--ds-p-space-8);
  --ds-space-3: var(--ds-p-space-12);
  --ds-space-4: var(--ds-p-space-16);
  --ds-space-5: var(--ds-p-space-24);
  --ds-space-6: var(--ds-p-space-32);
  --ds-space-7: var(--ds-p-space-48);
  --ds-space-8: var(--ds-p-space-64);
  --ds-space-9: var(--ds-p-space-96);

  /* Corners: Corners C, TJ's choice for now (October 24); they will evolve.
     The corner signals what you can do with a thing. Corners E would set --ds-radius-tag and
     --ds-radius-panel to --ds-p-radius-0 (what you read stays square): a two-line change. */
  --ds-radius-read: var(--ds-p-radius-0);
  --ds-radius-tag: var(--ds-p-radius-3);
  --ds-radius-chip: var(--ds-p-radius-3);
  --ds-radius-act: var(--ds-p-radius-5);
  --ds-radius-panel: var(--ds-p-radius-8);
  --ds-radius-switch: var(--ds-p-radius-5);
  --ds-radius-knob: var(--ds-p-radius-4);
  --ds-radius-note: var(--ds-p-radius-round);

  /* Lines, focus and sizes. */
  --ds-line: var(--ds-p-line-1);
  --ds-line-strong: var(--ds-p-line-2);
  --ds-focus-width: var(--ds-p-line-2);
  --ds-focus-offset: var(--ds-p-line-2);

  /* One height for every control, so a row of them lines up. Space is precious: compact on a
     screen; the slideshow sets it to its type, and a phone takes 44 px targets (--ds-touch). */
  --ds-control-height: var(--ds-p-height-32);
  --ds-control-height-sm: var(--ds-control-height);
  --ds-touch: var(--ds-p-height-44);
  --ds-topbar-height: var(--ds-p-height-56);
  --ds-lockup-mark: var(--ds-p-space-96);
  --ds-lockup-mark-sm: var(--ds-p-space-64);
  --ds-icon-size: var(--ds-p-space-16);
  --ds-measure: var(--ds-p-width-688);
  --ds-content: var(--ds-p-width-1280);
  --ds-full: var(--ds-p-width-1440);
  --ds-slide-margin: var(--ds-p-space-72);

  /* Places kept for text that changes, so it never moves what is around it. */
  --ds-slot-status: var(--ds-p-lines-1);
  --ds-slot-line: var(--ds-p-lines-1);
  --ds-slot-hint: var(--ds-p-lines-2);
  --ds-slot-caption: var(--ds-p-lines-2);

  /* Things that float over the page: one shadow, and a scrim behind a dialog. */
  --ds-shadow-float: 0 var(--ds-p-space-4) var(--ds-p-space-24) var(--ds-p-shadow-paper);
  --ds-scrim: var(--ds-p-scrim-paper);

  /* Motion: only what shows a change of state. */
  --ds-spin: var(--ds-p-time-900);
  --ds-layer-float: var(--ds-p-layer-1);
  --ds-layer-present: var(--ds-p-layer-2);
  --ds-layer-present-bar: var(--ds-p-layer-3);

  /* The grid: 12 columns on screens and slides, 4 on phones, 6 in print. */
  --ds-columns: 12;
  --ds-gutter: var(--ds-p-space-24);
  --ds-margin: var(--ds-p-space-32);

  color-scheme: light;
}

/* ── Roles: dark ─────────────────────────────────────────────────────────── */

/* Chosen with data-theme="dark" on <html>, or by the system when no choice is set. */
:root[data-theme="dark"] {
  --ds-bg: var(--ds-p-night-900);
  --ds-surface: var(--ds-p-night-900);
  --ds-surface-sunk: var(--ds-p-night-800);
  --ds-ground-tool: var(--ds-p-night-975);
  --ds-text: var(--ds-p-night-100);
  --ds-text-2: var(--ds-p-night-300);
  --ds-text-3: var(--ds-p-night-400);
  --ds-rule: var(--ds-p-night-600);
  --ds-rule-soft: var(--ds-p-night-700);
  --ds-rule-strong: var(--ds-p-night-100);
  --ds-field-border: var(--ds-p-night-400);
  --ds-ink: var(--ds-p-night-100);
  --ds-on-ink: var(--ds-p-night-950);
  --ds-hover: var(--ds-p-night-800);
  --ds-focus: var(--ds-p-night-100);
  --ds-ok: var(--ds-p-green-300);
  --ds-warn: var(--ds-p-amber-300);
  --ds-bad: var(--ds-p-red-300);
  --ds-shadow-float: 0 var(--ds-p-space-4) var(--ds-p-space-24) var(--ds-p-shadow-night);
  --ds-scrim: var(--ds-p-scrim-night);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ds-bg: var(--ds-p-night-900);
    --ds-surface: var(--ds-p-night-900);
    --ds-surface-sunk: var(--ds-p-night-800);
    --ds-ground-tool: var(--ds-p-night-975);
    --ds-text: var(--ds-p-night-100);
    --ds-text-2: var(--ds-p-night-300);
    --ds-text-3: var(--ds-p-night-400);
    --ds-rule: var(--ds-p-night-600);
    --ds-rule-soft: var(--ds-p-night-700);
    --ds-rule-strong: var(--ds-p-night-100);
    --ds-field-border: var(--ds-p-night-400);
    --ds-ink: var(--ds-p-night-100);
    --ds-on-ink: var(--ds-p-night-950);
    --ds-hover: var(--ds-p-night-800);
    --ds-focus: var(--ds-p-night-100);
    --ds-ok: var(--ds-p-green-300);
    --ds-warn: var(--ds-p-amber-300);
    --ds-bad: var(--ds-p-red-300);
    --ds-shadow-float: 0 var(--ds-p-space-4) var(--ds-p-space-24) var(--ds-p-shadow-night);
    --ds-scrim: var(--ds-p-scrim-night);
    color-scheme: dark;
  }
}

/* ── Contexts ────────────────────────────────────────────────────────────── */

/* A tool page (proposed, open for TJ): its ground a tone darker than paper, so each panel, paper
   and flat, reads as its own sheet. Opt in with data-ds-page="tool" on <html>, or on the element
   that holds the tool; a reading page stays on paper. */
[data-ds-page="tool"] { --ds-ground: var(--ds-ground-tool); }

/* Slideshow: three sizes, as the Reposar Method asks: headlines 56, body 28, everything
   smaller 20. Chrome around the slides (--ds-type-chrome, --ds-type-arrow) keeps its size. */
[data-ds-context="slideshow"] {
  --ds-control-height: var(--ds-p-height-44);
  --ds-type-h1: var(--ds-p-size-56);
  --ds-type-h2: var(--ds-p-size-56);
  --ds-type-h3: var(--ds-p-size-28);
  --ds-type-lede: var(--ds-p-size-28);
  --ds-type-body: var(--ds-p-size-28);
  --ds-type-ui: var(--ds-p-size-20);
  --ds-type-small: var(--ds-p-size-20);
  --ds-type-caption: var(--ds-p-size-20);
  --ds-type-label: var(--ds-p-size-20);
}

/* The slideshow on a phone: the same three steps, scaled to the screen in the hand. */
@media (width <= 639px) {
  [data-ds-context="slideshow"] {
    --ds-type-h1: var(--ds-p-size-32);
    --ds-type-h2: var(--ds-p-size-32);
    --ds-type-h3: var(--ds-p-size-20);
    --ds-type-lede: var(--ds-p-size-20);
    --ds-type-body: var(--ds-p-size-20);
    --ds-type-ui: var(--ds-p-size-16);
    --ds-type-small: var(--ds-p-size-16);
    --ds-type-caption: var(--ds-p-size-16);
    --ds-type-label: var(--ds-p-size-16);
  }
}