/* ==========================================================================
   theme.css: every colour, font, size and space used by page.css and the
   JavaScript charts is defined here as a CSS custom property.
   - Tokens follow khyang-lab.org (2026-10 pixel redesign) and the
     "Best Dating Strategy?" explorable: warm cream paper, warm-brown accent,
     IBM Plex type, pixel-art accents for headings and labels only.
   - Fonts are self-hosted (SIL OFL 1.1; licences in ../fonts/).
   - Data colours: --data-1 (blue) = English micro-drama, --data-2 (orange) =
     Chinese micro-drama, --data-3 (aqua) = the example drama; legacy formats
     use warm greys. Series are always direct-labelled.
   ========================================================================== */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/pixelify-sans-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* ---- Typefaces (system fallbacks cover Japanese / Chinese glyphs) ---- */
  --font-display: "IBM Plex Sans", "Hiragino Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Hiragino Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", "Hiragino Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-pixel: "Pixelify Sans", "IBM Plex Mono", ui-monospace, monospace;   /* short headings and labels only */

  /* ---- Type scale (≈ 1.25 ratio, fluid) ---- */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0875rem);
  --text-lg: clamp(1.18rem, 1.1rem + 0.35vw, 1.32rem);
  --text-xl: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem);
  --text-2xl: clamp(2rem, 1.45rem + 2.4vw, 3.3rem);
  --leading-body: 1.65;
  --leading-tight: 1.15;

  /* ---- Surfaces & ink (khyang-lab warm cream) ---- */
  --color-paper: #F3EAD3;
  --color-paper-sunk: #EADDC0;
  --color-paper-raised: #FBF5E6;
  --color-ink: #2B2118;
  --color-ink-soft: #3F3226;
  --color-ink-muted: #5B4A37;
  --color-rule: #DDCCA8;
  --color-rule-strong: #C9B48C;

  /* ---- Accent: interactive controls only (links, buttons, focus) ---- */
  --color-accent: #8A4B0F;
  --color-accent-hover: #6A3808;
  --color-accent-soft: #F2DEC4;
  --color-on-accent: #FBF5E6;

  /* ---- Data colours (charts only; never UI chrome) ---- */
  --data-1: #2a78d6;          /* English micro-drama (blue) */
  --data-2: #eb6834;          /* Chinese micro-drama (orange) */
  --data-2-soft: #f4a582;     /* Chinese route B (lighter orange; always labelled) */
  --data-3: #1baf7a;          /* the example drama (aqua; always labelled) */
  --data-ref: #898781;        /* reference lines */
  --fmt-soap: #CFC6B4;        /* legacy formats: warm greys, light → dark */
  --fmt-tv: #9A907F;
  --fmt-film: #5F574B;
  --data-grid: #EADFC9;
  --data-axis: #C9B994;
  /* event types in the scene strip (plus a shape/letter, never colour alone) */
  --ev-wrong: #9A907F;
  --ev-contempt: #b0479a;
  --ev-retrib: #2a78d6;
  --ev-reveal: #d18a00;

  --shadow-px: 4px 4px 0 #D2BD92;                 /* hard, blur-free shadow */
  --frame: 2px solid var(--color-ink);

  /* ---- Space, measure, shape ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --space-xl: clamp(3rem, 2.2rem + 3vw, 5rem);
  --measure: 66ch;
  --wide: 1120px;
  --radius-s: 0;
  --border: 1px solid var(--color-rule);

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
}

/* ---- Dark theme: OS setting (unless the page is pinned to light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: #16120D;
    --color-paper-sunk: #1F1912;
    --color-paper-raised: #221B13;
    --color-ink: #F0E4CA;
    --color-ink-soft: #DCCDAE;
    --color-ink-muted: #CDBB98;
    --color-rule: #3E3224;
    --color-rule-strong: #5A4A36;
    --color-accent: #F0B24A;
    --color-accent-hover: #FFD08A;
    --color-accent-soft: #3A2A12;
    --color-on-accent: #16120D;
    --data-1: #3987e5; --data-2: #d95926; --data-2-soft: #b5693f; --data-3: #199e70; --data-ref: #898781;
    --fmt-soap: #6B6253; --fmt-tv: #8E8473; --fmt-film: #B9AE99;
    --data-grid: #2B2620; --data-axis: #4A4236;
    --ev-wrong: #8E8473; --ev-contempt: #d06bbb; --ev-retrib: #3987e5; --ev-reveal: #e0a020;
    --shadow-px: 4px 4px 0 #0B0805;
  }
}

/* ---- Dark theme: explicit toggle ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: #16120D;
  --color-paper-sunk: #1F1912;
  --color-paper-raised: #221B13;
  --color-ink: #F0E4CA;
  --color-ink-soft: #DCCDAE;
  --color-ink-muted: #CDBB98;
  --color-rule: #3E3224;
  --color-rule-strong: #5A4A36;
  --color-accent: #F0B24A;
  --color-accent-hover: #FFD08A;
  --color-accent-soft: #3A2A12;
  --color-on-accent: #16120D;
  --data-1: #3987e5; --data-2: #d95926; --data-2-soft: #b5693f; --data-3: #199e70; --data-ref: #898781;
  --fmt-soap: #6B6253; --fmt-tv: #8E8473; --fmt-film: #B9AE99;
  --data-grid: #2B2620; --data-axis: #4A4236;
  --ev-wrong: #8E8473; --ev-contempt: #d06bbb; --ev-retrib: #3987e5; --ev-reveal: #e0a020;
  --shadow-px: 4px 4px 0 #0B0805;
}