/*
 * Site tokens: custom properties only. No url(), no element selectors, so the
 * gallery can import this file and scene JS can read it with getComputedStyle.
 * Fonts, element defaults and components live in /site.css.
 *
 * Load order on static pages:
 *   /vendor/modern-normalize.css → /theme.css → /site.css → page CSS
 *
 * Schemes. Paper is the default; night applies under the system dark setting
 * unless the page pins paper, and wherever data-theme="dark" is set. Pin a
 * page by putting data-theme on <html>; data-theme on any other element makes
 * it an island that re-resolves every role. Every value is plain hex (no
 * light-dark(), no oklch()) so three.js can parse what getComputedStyle hands
 * it, and --focus, --rule, --current and --scrim are literal hex in every block:
 * a var() alias resolves where it is declared, so an island would inherit the
 * outer scheme's ring. tests/theme.test.mjs holds every role to WCAG AA.
 *
 * Rule: ink acts, vermilion marks. --accent never signals state and never
 * labels data in chrome; status roles always come with a word or glyph.
 */

/* Paper. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f0eb;
  --surface: #fbfaf7;
  --tint: #edebe5;
  --ink: #171714;
  --ink-2: #4f4d48;
  --muted: #696761;
  --line: #cbc8c0;
  --line-strong: #7d7a73;
  --rule: #171714;
  --accent: #ef4f2f;
  --accent-text: #b83e22;
  --eyebrow: #b83e22;
  --current: #ef4f2f;
  --accent-soft: #ffb68d;
  --on-accent: #171714;
  --action-bg: #171714;
  --action-ink: #f2f0eb;
  --focus: #171714;
  --selection-bg: #ffb68d;
  --selection-ink: #171714;
  --critical: #b83356;
  --critical-tint: #fde2e5;
  --caution: #8f5a04;
  --caution-tint: #f8eace;
  --positive: #397147;
  --positive-tint: #def1e1;
  --scrim: #0d0d0bbf;
  --scrim-strong: #0d0d0bd6;
}

/* Night: the same ink turned over. The two night blocks stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d0b;
    --surface: #171714;
    --tint: #22211e;
    --ink: #f2f0eb;
    --ink-2: #c3c0b7;
    --muted: #a7a49c;
    --line: #393833;
    --line-strong: #716e68;
    --rule: #f2f0eb;
    --accent: #ef4f2f;
    --accent-text: #f76143;
    --eyebrow: #a7a49c;
    --current: #ef4f2f;
    --accent-soft: #79371e;
    --on-accent: #171714;
    --action-bg: #f2f0eb;
    --action-ink: #0d0d0b;
    --focus: #f2f0eb;
    --selection-bg: #ffb68d;
    --selection-ink: #171714;
    --critical: #f3798b;
    --critical-tint: #3e1e22;
    --caution: #d09945;
    --caution-tint: #382810;
    --positive: #6fb880;
    --positive-tint: #1a2e1e;
    --scrim: #0d0d0bbf;
    --scrim-strong: #0d0d0bd6;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0b;
  --surface: #171714;
  --tint: #22211e;
  --ink: #f2f0eb;
  --ink-2: #c3c0b7;
  --muted: #a7a49c;
  --line: #393833;
  --line-strong: #716e68;
  --rule: #f2f0eb;
  --accent: #ef4f2f;
  --accent-text: #f76143;
  --eyebrow: #a7a49c;
  --current: #ef4f2f;
  --accent-soft: #79371e;
  --on-accent: #171714;
  --action-bg: #f2f0eb;
  --action-ink: #0d0d0b;
  --focus: #f2f0eb;
  --selection-bg: #ffb68d;
  --selection-ink: #171714;
  --critical: #f3798b;
  --critical-tint: #3e1e22;
  --caution: #d09945;
  --caution-tint: #382810;
  --positive: #6fb880;
  --positive-tint: #1a2e1e;
  --scrim: #0d0d0bbf;
  --scrim-strong: #0d0d0bd6;
}

/*
 * Quiet pages (ITM, capex, the gallery), whose content already carries color:
 * vermilion is left to the MJ disc. Put data-accent="quiet" on <html>, beside
 * data-theme; islands inside it stay quiet. Must follow the scheme blocks.
 */
[data-accent="quiet"],
[data-accent="quiet"] [data-theme="light"] {
  --accent-text: #4f4d48;
  --eyebrow: #696761;
  --current: #171714;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="quiet"] {
    --accent-text: #c3c0b7;
    --eyebrow: #a7a49c;
    --current: #f2f0eb;
  }
}

[data-accent="quiet"][data-theme="dark"],
[data-accent="quiet"] [data-theme="dark"] {
  --accent-text: #c3c0b7;
  --eyebrow: #a7a49c;
  --current: #f2f0eb;
}

/* Scheme-independent tokens. */
:root {
  /* Apple visitors keep Helvetica Neue and download nothing; everyone else
     gets the self-hosted Inter (site.css). :lang(zh) redefines --font-sans. */
  --font-sans:
    "Helvetica Neue", "Inter Variable", "Inter Fallback", system-ui, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale. 12px is the floor for text a reader needs; 11px is for
     instrument overlays only. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-prose: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: clamp(38px, 3.4vw + 20px, 64px);
  --text-display: clamp(57px, 6.6vw, 110px);

  /* Rhythm. Weights are 400, 500 and 700 only; :lang(zh) caps bold at 500,
     zeroes tracking, drops the uppercase and opens prose to 1.8. */
  --leading-display: 1.02;
  --leading-heading: 1.2;
  --leading-ui: 1.55;
  --leading-prose: 1.7;
  --tracking-display: -0.06em;
  --tracking-heading: -0.035em;
  --tracking-label: 0.1em;
  --label-case: uppercase;
  --weight-bold: 700;

  /* Space. Pixel layouts (ITM, gallery, capex) keep their own geometry. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: clamp(16px, 4vw, 44px);
  --section: clamp(64px, 9vw, 124px);
  --wide: 1512px;
  --content: 1100px;
  --prose: 68ch;

  /* Radii: square document panels, 4px photographs and instrument controls,
     pills for document buttons, chips and tags. */
  --radius-0: 0;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* The one chrome shadow, on paper homepage panels. Literal, so a night
     island still casts a paper shadow. */
  --shadow-offset: 8px 8px 0 #1717140a;

  /* Motion. Reduced motion zeroes these below; site.css resets scrolling. */
  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --lift: -2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --lift: 0px;
  }
}