/* ==========================================================================
   tokens.css — Design tokens
   Single source of truth. Light/dark is switched via `data-theme` on <html>.

   Direction: black, quiet, one accent, glass. Everything else gets out of
   the way so the content is the only thing competing for attention.
   ========================================================================== */

:root {
    /* ---------- Brand ---------- */
    --brand-ink: #1d1d1d;
    --brand-paper: #f5f5f5;

    /* ---------- Typography ----------
       Apple's system stack: real SF Pro on Apple hardware, the cleanest native
       UI font everywhere else. No webfont, so text is always crisp. */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas,
        monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 1rem;
    --fs-md: clamp(1rem, 0.3vw + 0.95rem, 1.0625rem);
    --fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    --fs-h4: clamp(1.15rem, 0.7vw + 1.05rem, 1.375rem);
    --fs-h3: clamp(1.5rem, 1.6vw + 1.15rem, 1.9rem);
    --fs-h2: clamp(1.85rem, 2.8vw + 1.2rem, 2.75rem);
    --fs-h1: clamp(2.4rem, 5.5vw + 1.2rem, 4.5rem);

    --lh-tight: 1.05;
    --lh-snug: 1.18;
    --lh-normal: 1.55;

    --tracking-tight: -0.035em;
    --tracking-normal: -0.015em;
    --tracking-wide: 0.14em;

    /* ---------- Spacing ---------- */
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: 5rem;
    --space-section: clamp(4.5rem, 10vw, 8.5rem);

    /* ---------- Radii ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---------- Layout ---------- */
    --container: 1120px;
    --container-narrow: 780px;
    --gutter: clamp(1.25rem, 5vw, 2.5rem);
    --header-h: 64px;

    /* ---------- Motion ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur-base: 280ms;
    --dur-slow: 650ms;

    --z-sticky: 100;
    --z-header: 200;
    --z-top: 400;
}

/* ==========================================================================
   Dark — Apple-inspired and fully monochrome. Pure black canvas, #1d1d1d panels,
   one white accent. No hue anywhere.
   ========================================================================== */

:root,
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #000000;
    --bg-elev: #1d1d1d;
    --bg-deep: #000000;

    /* Frosted surfaces — barely-there films, not grey panels. */
    --glass: rgba(255, 255, 255, 0.04);
    --glass-hover: rgba(255, 255, 255, 0.08);
    --glass-strong: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-hover: rgba(255, 255, 255, 0.24);
    --glass-blur: 20px;
    --glass-edge: rgba(255, 255, 255, 0.08);

    --text: #f5f5f5;
    --text-muted: #a1a1a1;
    --text-faint: #6e6e6e;

    --accent: #f5f5f5;
    --accent-hover: #ffffff;
    --accent-contrast: #000000;
    --accent-soft: rgba(255, 255, 255, 0.12);
    --accent-line: rgba(255, 255, 255, 0.32);

    --success: #d4d4d4;
    --danger: #ffffff;

    --shadow-sm: 0 4px 16px -8px rgba(0, 0, 0, 0.8);
    --shadow-md: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
    --shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, 0.95);
    --shadow-lift: 0 24px 48px -24px rgba(0, 0, 0, 0.9);

    /* Ambient light. Monochrome only: a soft white source, no hue. */
    --glow-1: rgba(255, 255, 255, 0.09);
    --glow-2: rgba(255, 255, 255, 0.035);
    --grid-line: rgba(255, 255, 255, 0.045);
    --blob: #ffffff;
    --field-bg: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Light — warm cream/beige. A softer, less glaring canvas with real tonal
   layering (cream bg → sand deep → warm-white cards), warm borders and
   shadows. Still no blue/purple/cyan; a warm rust/olive carry the states.
   ========================================================================== */

[data-theme="light"] {
    color-scheme: light;

    /* Three warm tiers so surfaces read as separate planes, not one white. */
    --bg: #f2eee5;
    --bg-elev: #fffdf8;
    --bg-deep: #e7dfd1;

    --glass: rgba(255, 253, 248, 0.7);
    --glass-hover: rgba(255, 253, 248, 0.9);
    --glass-strong: rgba(255, 253, 248, 0.94);
    --glass-border: rgba(58, 46, 30, 0.13);
    --glass-border-hover: rgba(58, 46, 30, 0.24);
    --glass-blur: 18px;
    --glass-edge: rgba(255, 253, 248, 0.9);

    --text: #2a251d;
    --text-muted: #6b6253;
    --text-faint: #756b58;

    --accent: #2a251d;
    --accent-hover: #000000;
    --accent-contrast: #fffdf8;
    --accent-soft: rgba(58, 46, 30, 0.08);
    --accent-line: rgba(58, 46, 30, 0.3);

    --success: #5c6a45;
    --danger: #96432f;

    /* Warm-tinted shadows: brown, never neutral grey. */
    --shadow-sm: 0 2px 10px -6px rgba(74, 58, 36, 0.2);
    --shadow-md: 0 16px 34px -20px rgba(74, 58, 36, 0.26);
    --shadow-lg: 0 30px 60px -30px rgba(74, 58, 36, 0.3);
    --shadow-lift: 0 20px 44px -24px rgba(74, 58, 36, 0.28);

    /* Warm ambient light from the top edge. */
    --glow-1: rgba(140, 105, 55, 0.07);
    --glow-2: rgba(140, 105, 55, 0.035);
    --grid-line: rgba(58, 46, 30, 0.06);
    --blob: #3a2e1e;
    --field-bg: rgba(255, 253, 248, 0.9);
}