/* Design tokens: the one source for colour, type, shape, space and motion.
   Loaded by the site, by every case/CV document iframe and by
   /design-system. Nothing outside this file should introduce a new colour,
   typeface, radius or weight. Reach for the semantic tokens (text, line,
   fill); the primitives exist only so the semantic ones can be defined. */

:root {
  /* ── Colour: three primitives ─────────────────────────────────────────
     Ink is the stage, paper is everything written on it. Signal is a lit
     point: paper at full strength with a soft glow, like a city light seen
     from orbit on a black-and-white planet. There is no hue anywhere. It
     stays small (dots, marks, a single line), never a fill. */
  --ink-0: #050506;          /* stage */
  --ink-1: #0c0c0e;          /* surfaces: panels, cards, composer */
  --ink-2: #141416;          /* raised: the top layer on the chat (bubbles, composer, in-chat cards) */
  --ink-card: #1e1e1f;       /* cards on the bare stage, the header pills and their menus: the selected tab's grey, opaque */
  --paper: #f2f2ee;          /* type and icons */
  --signal: #f2f2ee;         /* the lit point: paper at full light, with a glow */

  --paper-rgb: 242, 242, 238;
  --white-rgb: 255, 255, 255;   /* the "light on ink" channel: lines, fills, highlights */
  --signal-rgb: 242, 242, 238;
  --ink-0-rgb: 5, 5, 6;         /* stage, for fades and scrims that blend into it */
  --ink-1-rgb: 12, 12, 14;      /* surfaces, for translucent panels */
  color-scheme: dark;

  /* Text: four steps, nothing in between. */
  --text-strong: rgba(var(--paper-rgb), 0.96);   /* headings, emphasis */
  --text-body: rgba(var(--paper-rgb), 0.82);     /* reading text */
  --text-soft: rgba(var(--paper-rgb), 0.62);     /* secondary copy */
  --text-faint: rgba(var(--paper-rgb), 0.42);    /* labels, captions, meta */

  /* Lines: hairline dividers, component borders, hover/strong borders. */
  --line-faint: rgba(var(--white-rgb), 0.05);
  --line: rgba(var(--white-rgb), 0.1);
  --line-strong: rgba(var(--white-rgb), 0.16);

  /* Fills on top of ink. */
  --fill-faint: rgba(var(--white-rgb), 0.03);
  --fill: rgba(var(--white-rgb), 0.06);
  --fill-strong: rgba(var(--white-rgb), 0.1);

  /* Signal at the only strengths it is used at, plus its glow: a lit point
     carries a soft halo, like a city at night. */
  --signal-strong: rgba(var(--signal-rgb), 0.9);
  --signal-soft: rgba(var(--signal-rgb), 0.12);
  --signal-glow: 0 0 8px rgba(var(--signal-rgb), 0.55);

  /* ── Type: two families ───────────────────────────────────────────────
     Geist carries everything. Mono is for numbers inside data graphics only. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  /* Scale: size / line-height pairs. */
  --type-display: 26px;     --type-display-lh: 1.15;  /* document title, big numbers */
  --type-heading: 20px;     --type-heading-lh: 1.3;   /* document section headings */
  --type-title: 16px;       --type-title-lh: 1.35;    /* in-document subheadings */
  --type-body: 14px;        --type-body-lh: 1.6;      /* reading text, chat */
  --type-small: 13px;       --type-small-lh: 1.5;     /* lists, tables, callouts */
  --type-caption: 12px;     --type-caption-lh: 1.45;  /* captions, metric labels */
  --type-label: 10px;       --type-label-lh: 1.2;     /* uppercase section labels */
  --tracking-label: 0.08em;                           /* labels only; all else is 0 */

  /* ── Shape: three radii and a pill ───────────────────────────────────
     Every box is round. Pick by the element's size, never a one-off. */
  --radius-sm: 8px;     /* small things: icon buttons, focus rows, thumbnails */
  --radius-md: 16px;    /* content: case cards, images, tables, popovers */
  --radius-lg: 28px;    /* containers: panels, composer, bubbles, chips */
  --radius-full: 999px; /* dots, round buttons, pills */

  /* ── Space: 4px base ─────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --duration-fast: 160ms;
  --duration-base: 360ms;
  --duration-slow: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Chinese interface: Geist has no Han glyphs, so the platform's Chinese UI
   face follows it in the stack (Latin letters and digits stay in Geist).
   <html lang="zh-Hans"> also picks Simplified glyph forms. */
:root:lang(zh) {
  --font-sans: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", "Source Han Sans SC", ui-sans-serif, system-ui, sans-serif;
}
/* …but a Russian or English run inside the Chinese page (the language menu)
   keeps the Latin stack: Geist has no Cyrillic, and PingFang's Cyrillic is
   set wide, "Р у с с к и й". */
:root:lang(zh) :is([lang="ru"], [lang="en"]) {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Light theme. The site follows the visitor's system setting until they
   pick a theme with the toggle (stored in localStorage); an inline script in
   <head> sets data-theme before first paint. The stage is white and the
   surfaces (panels, cards, composer) a quiet grey. Every semantic token above is
   built from these primitives, so swapping them is the whole theme: paper
   becomes near-black ink on a pale stage, and the "light on ink" channel
   becomes black, so lines and fills read as quiet dark alphas.
   "only light" opts out of Chrome's Auto Dark Mode, which otherwise repaints
   a light page into its own grey dark theme on a dark system. */
:root[data-theme="light"] {
  --ink-0: #ffffff;
  --ink-1: #f4f4f5;
  --ink-2: #ececee;
  --ink-card: #ffffff;
  --paper: #121214;
  --signal: #121214;
  --paper-rgb: 18, 18, 20;
  --white-rgb: 0, 0, 0;
  --signal-rgb: 18, 18, 20;
  --ink-0-rgb: 255, 255, 255;
  --ink-1-rgb: 244, 244, 245;
  --signal-glow: 0 0 6px rgba(18, 18, 20, 0.25);
  color-scheme: only light;
}
@media (prefers-color-scheme: light) {
  /* Without JavaScript, follow the system setting. */
  :root:not([data-theme]) {
    --ink-0: #ffffff;
    --ink-1: #f4f4f5;
    --ink-2: #ececee;
    --ink-card: #ffffff;
    --paper: #121214;
    --signal: #121214;
    --paper-rgb: 18, 18, 20;
    --white-rgb: 0, 0, 0;
    --signal-rgb: 18, 18, 20;
    --ink-0-rgb: 255, 255, 255;
    --ink-1-rgb: 244, 244, 245;
    --signal-glow: 0 0 6px rgba(18, 18, 20, 0.25);
    color-scheme: only light;
  }
}