/* ═══════════════════════════════════════════════════════════
   THEME TOKENS — landing & top-level pages
   ─────────────────────────────────────────────────────────── 

   Single source of truth for the editorial / marketing surface
   (landing.html, logo studies, brand pages).

   Theming model:
     • Light by default.
     • Dark via @media (prefers-color-scheme: dark).
     • No JS, no toggle, no localStorage.
     • Subtree opt-out: any element with [data-theme="light"]
       re-anchors back to the light palette inside dark mode.
       Used to keep the product showcase bright on dark pages.

   NOT used by per-chapter modules under source/modules/**.
   Those use the --txt / --bg / --glass / --border vocabulary
   and ship their own three-theme toggle (light/dark/sepia).

   ─────────────────────────────────────────────────────────── */

:root {
    /* ── Surfaces ── */
    --bg: #f6f7f9;            /* page background */
    --bg-2: #eef0f4;          /* tinted bg used for hover, kbd hint, subject-row hover */
    --surface: #ffffff;       /* card / popover / pill background */
    --surface-2: #f6f7f9;     /* recessed surface for back-faces, gradients */

    /* ── Lines ── */
    --rule: #e2e5eb;          /* primary border */
    --rule-2: #cbcfd8;        /* hover / scrollbar / underline border */

    /* ── Ink (text) ── */
    --ink: #0f1115;           /* primary text + headings */
    --ink-2: #4a4f5a;         /* secondary body text */
    --ink-3: #8e93a0;         /* tertiary, mono labels, placeholders */

    /* ── Brand accent ── */
    --accent: #4338CA;        /* indigo-700 */
    --accent-2: #3730A3;      /* indigo-800, used for press shadow */
    --accent-soft: rgba(67, 56, 202, 0.08);   /* tinted bg for accent pills */
    --accent-rgb: 67, 56, 202;                /* for rgba() composition */

    /* ── Effects ── */
    --shadow-rgb: 15, 17, 21; /* base for rgba shadows */
    --nav-bg: rgba(250, 250, 247, 0.85);
    --kbd-grad: linear-gradient(180deg, #ffffff 0%, var(--bg-2) 100%);

    /* ── Typography ── */
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ── Native widget hint ── */
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0d12;
        --bg-2: #14171f;
        --surface: #14171f;
        --surface-2: #1c2029;

        --rule: #262b35;
        --rule-2: #353b48;

        --ink: #e7eaf0;
        --ink-2: #a6acb8;
        --ink-3: #6e7280;

        /* Indigo lifts ~2 stops on dark so it doesn't go muddy. */
        --accent: #818cf8;
        --accent-2: #6366f1;
        --accent-soft: rgba(129, 140, 248, 0.14);
        --accent-rgb: 129, 140, 248;

        --shadow-rgb: 0, 0, 0;
        --nav-bg: rgba(11, 13, 18, 0.78);
        --kbd-grad: linear-gradient(180deg, #1c2029 0%, #14171f 100%);

        color-scheme: dark;
    }

    /* Subtree opt-out — pin a region to the light palette.
       Used by the landing-page product stage so the showcase
       reads as "the product" inside a dark page. */
    [data-theme="light"] {
        --bg: #f6f7f9;
        --bg-2: #eef0f4;
        --surface: #ffffff;
        --surface-2: #f6f7f9;

        --rule: #e2e5eb;
        --rule-2: #cbcfd8;

        --ink: #0f1115;
        --ink-2: #4a4f5a;
        --ink-3: #8e93a0;

        --accent: #4338CA;
        --accent-2: #3730A3;
        --accent-soft: rgba(67, 56, 202, 0.08);
        --accent-rgb: 67, 56, 202;

        --shadow-rgb: 15, 17, 21;
        --kbd-grad: linear-gradient(180deg, #ffffff 0%, var(--bg-2) 100%);

        color-scheme: light;
    }
}