/* ═══════════════════════════════════════════════════════════════════
   shared/tokens.css — the house style, and nothing else.

   Every page on the site loads this FIRST: the four deck pages (which
   then load deck.css on top) and the landing page (which loads
   landing.css on top). It holds the reset, the design tokens and the
   light/dark colour scheme — the things both the slide stage and the
   landing page need.

   It deliberately does NOT hold `body { overflow: hidden }`. That is
   deck behaviour (the slide stage owns the viewport), not a token, and
   it lives in deck.css. Keeping it out is what lets the landing page
   scroll without an `!important` override.
   ═══════════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;
    /* Single source of truth for transition timing */
    --dur: 0.95s;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Slide typography — tune the whole deck from here ──────
                   Every templated slide type (shared/slide-templates.js) reads
                   these, so changing a weight or size restyles every chapter at
                   once instead of editing inline styles slide by slide. Sizes
                   are in 1920×1080 design-space px (they scale with the slide).
                   The signature is "big = thin, small = heavier". */
    --s-eyebrow-size: 24px; /* slide number / eyebrow label */
    --s-eyebrow-weight: 200;
    --s-eyebrow-tracking: 2px;
    --s-title-size: 72px; /* section / chapter title */
    --s-title-weight: 400;
    --s-statement-size: 96px; /* the one oversized line */
    --s-statement-weight: 200;
    --s-split-title-size: 62px; /* title in dense two-column layouts */
    --s-body-size: 30px; /* bullets, split body, supporting text */
    --s-body-weight: 400;
    --s-caption-size: 18px; /* descriptions, asides, captions */

    /* Code typography — code is set in IBM Plex Mono: weight 600 for code,
       400 for comments. Use var(--s-code-font) (it falls back to Courier/mono)
       and the .s-code / .s-code-comment helpers below. */
    --s-code-font: "IBM Plex Mono", "Courier New", monospace;
    --s-code-weight: 600;
    --s-comment-weight: 400;

    /* ── Layout grid — the deck's single column system ─────────
                   12 columns inside the 96px safe area of the 1920×1080 canvas,
                   with 24px gutters (12×122 + 11×24 = 1728 = content width). This
                   is the grid every two-column slide is built on: .s-split (and
                   chapter-9's principSlide twin) split on the col-7 / col-8
                   boundary so content genuinely lands on the grid, not near it.
                   span(n) = n×col + (n−1)×gutter. */
    --grid-margin: 96px;
    --grid-gutter: 24px;
    --grid-col: 122px;
    --grid-span-7: 998px; /* cols 1–7  (7×122 + 6×24) — split body */
    --grid-span-5: 706px; /* cols 8–12 (5×122 + 4×24) — split media */
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-primary: #fff5e5;
        --bg-secondary: #f9f8f6;
        --text-primary: #191818;
        --text-secondary: #555;
        --text-tertiary: #999;
        --border-color: #e8e8e8;
        --rail-border: #313131;
        /* Accent as r,g,b for rgba() tints; JS overrides per subject. */
        --accent-rgb: 64, 98, 205;
        --sidebar-bg: rgba(var(--accent-rgb), 0.05);
        --overlay-bg: #fff5e5;
        --accent-color: #4062cd;
        --accent-dark: #2e47a8;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #191818;
        --bg-secondary: #1f1f1f;
        --text-primary: #fff5e5;
        --text-secondary: #ddd;
        --text-tertiary: #999;
        --border-color: #333;
        --rail-border: #5c5c5c;
        --shadow-rgb: 255, 245, 229;
        --accent-rgb: 64, 98, 205;
        --sidebar-bg: rgba(var(--accent-rgb), 0.1);
        --overlay-bg: #191818;
        --accent-color: #4062cd;
        --accent-dark: #2e47a8;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --shadow-rgb: 0, 0, 0;
    }
}

body {
    font-family: "Spectral", serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100dvh;
}