/* ==========================================================================
   theme.css — the ONLY file you need to edit to restyle this page.
   Every colour, font, size, space and radius used by page.css and the
   JavaScript charts is defined here as a CSS custom property.
   - Matched to khyang-lab.org (2026-10): warm cream paper, warm-brown accent,
     IBM Plex type, with small pixel-art accents. Surface/ink/accent values
     re-aligned to the site's pixel redesign on 2026-10-11 (data colours unchanged).
   - Data colours (--data-*, --seq-*) come from a colour-blind-validated
     palette; if you change them, keep series 1/2 distinguishable and keep
     the sequential ramp a single hue, light → dark.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Typefaces (loaded in index.html <head>; safe system fallbacks) ---- */
  --font-display: "IBM Plex Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;     /* headings, numbers */
  --font-body: "IBM Plex Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;    /* long-form reading */
  --font-ui: "IBM Plex Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;          /* controls, labels, charts */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-pixel: "DotGothic16", "IBM Plex Mono", ui-monospace, monospace;                    /* short pixel accents 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(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --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;        /* khyang-lab amber-brown (2026-10-11 pixel redesign), AA on cream */
  --color-accent-hover: #6A3808;
  --color-accent-soft: #F2DEC4;
  --color-on-accent: #FBF5E6;

  /* ---- Data colours (charts and the board; never used for UI chrome) ---- */
  --data-1: #2a78d6;          /* series 1 (blue)   */
  --data-2: #eb6834;          /* series 2 (orange) */
  --data-3: #1baf7a;          /* series 3 (aqua; low contrast, always direct-labelled) */
  --data-ref: #898781;        /* reference lines (oracle, baselines) */
  --data-mid: #f0efec;        /* neutral midpoint of the diverging scale (partner vs you) */
  --data-never: #ECE3D2;      /* "never settled" cells */
  --data-never-hatch: #B3A68F;
  --data-truth: #E2DACB;      /* true distribution fill; also the "still looking" band (warm grey) */
  --data-blank: #F4C9C4;      /* blank period after a refusal (meets nobody): rose, differs from --data-truth */
  --data-grid: #EADFC9;
  --data-axis: #C9B994;
  /* sequential ramp (low → high), single hue */
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5;
  --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;

  /* ---- Status of each premise in Part 2 (UI, not data): loosened in our models vs kept as in the theorem ---- */
  --status-loosen: oklch(46% 0.11 165);       /* text and border */
  --status-loosen-bg: oklch(95% 0.035 165);
  --status-keep: oklch(48% 0.10 65);
  --status-keep-bg: oklch(95.5% 0.04 80);

  /* ---- Pixel accents and the blackboard (Part 1 derivation) ---- */
  --shadow-px: 4px 4px 0 var(--color-rule-strong); /* hard, blur-free shadow */
  --chalk-board: #24342C;
  --chalk-board-edge: #6B4F2A;
  --chalk-ink: #F4EFE3;
  --chalk-dim: #B9C2B6;
  --chalk-line: #5E7365;
  --chalk-fill: #3A4D42;
  --board-frame: #2B2118;                          /* tray behind the 10 × 10 boards */

  /* ---- 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);
  --space-2xl: clamp(4.5rem, 3rem + 5vw, 8rem);
  --measure: 68ch;
  --wide: 1160px;
  --radius-s: 2px;
  --radius-m: 4px;
  --border: 1px solid var(--color-rule);

  /* ---- Motion ---- */
  --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-3: #199e70; --data-ref: #898781; --data-mid: #383835;
    --data-never: #2A251E; --data-never-hatch: #5A5042;
    --data-truth: #38332B; --data-grid: #2B2620; --data-axis: #4A4236; --data-blank: #5A2E2E;
    --status-loosen: oklch(80% 0.11 165); --status-loosen-bg: oklch(27% 0.04 165);
    --status-keep: oklch(82% 0.10 75); --status-keep-bg: oklch(28% 0.035 70);
    --seq-1: #104281; --seq-2: #184f95; --seq-3: #256abf; --seq-4: #3987e5;
    --seq-5: #6da7ec; --seq-6: #9ec5f4; --seq-7: #cde2fb;
    --shadow-px: 4px 4px 0 #000;
    --chalk-board: #1C2A23; --chalk-board-edge: #4A3820; --chalk-ink: #F4EFE3; --chalk-dim: #AEB8AB;
    --chalk-line: #4D6155; --chalk-fill: #2E4037; --board-frame: #070605;
  }
}

/* ---- 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-3: #199e70; --data-ref: #898781; --data-mid: #383835;
  --data-never: #2A251E; --data-never-hatch: #5A5042;
  --data-truth: #38332B; --data-grid: #2B2620; --data-axis: #4A4236; --data-blank: #5A2E2E;
  --status-loosen: oklch(80% 0.11 165); --status-loosen-bg: oklch(27% 0.04 165);
  --status-keep: oklch(82% 0.10 75); --status-keep-bg: oklch(28% 0.035 70);
  --seq-1: #104281; --seq-2: #184f95; --seq-3: #256abf; --seq-4: #3987e5;
  --seq-5: #6da7ec; --seq-6: #9ec5f4; --seq-7: #cde2fb;
  --shadow-px: 4px 4px 0 #000;
  --chalk-board: #1C2A23; --chalk-board-edge: #4A3820; --chalk-ink: #F4EFE3; --chalk-dim: #AEB8AB;
  --chalk-line: #4D6155; --chalk-fill: #2E4037; --board-frame: #070605;
}