/* ==========================================================================
   Design tokens — mirror of DESIGN.md (LOCKED 2026-09-27).
   Component CSS uses ONLY these vars. Dark is the default/brand.
   ========================================================================== */

/* Fonts — self-hosted, SIL OFL (Inter, JetBrains Mono) */
@font-face {
    font-family: "Inter Variable";
    src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"), url("../fonts/inter-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color — dark (default) */
    --color-bg: #0a0d16;
    --color-surface: #121726;
    --color-surface-2: #1a2034;
    --color-border: #252c44;
    --color-text: #e8eaf0;
    --color-muted: #9aa3b8;
    --color-accent: #e070e0;
    --color-accent-2: #5b9cff;
    --color-accent-contrast: #0a0d16;
    --color-glow: #c040c0;
    --color-code-bg: #121726;
    --color-code-text: #e8eaf0;
    --hero-shade: 10, 13, 22;          /* rgb of --color-bg, for gradients */
    --logo-glow: drop-shadow(0 0 14px rgba(192, 64, 192, 0.55));

    /* Syntax */
    --syn-comment: #7f89a3;
    --syn-keyword: #e070e0;
    --syn-string: #8fd6a8;
    --syn-number: #f0b36b;
    --syn-function: #5b9cff;
    --syn-property: #7fc8ff;

    /* Type — --gh-font-* are set when a custom font is picked in Ghost Admin */
    --font-sans: var(--gh-font-body, "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --font-heading: var(--gh-font-heading, var(--font-sans));
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: clamp(2rem, 5vw, 3rem);
    --leading-tight: 1.2;
    --leading-body: 1.7;
    --tracking-eyebrow: 0.14em;

    /* Space (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 12px;

    /* Layout */
    --width-narrow: 70ch;
    --width-wide: 1120px;
    --width-full: 1400px;
    --gutter: var(--space-4);
    --header-height: 64px;
    --hero-min-height: min(78vh, 640px);
    --logo-header-height: 30px;
    --logo-hero-width: min(520px, 82vw);

    /* Motion */
    --transition: 150ms ease;

    color-scheme: dark;
}

/* Light — when forced, or when "System" is chosen and the OS prefers light */
@media (prefers-color-scheme: light) {
    :root[data-color-scheme="system"]:not([data-theme="dark"]) {
        --color-bg: #fbfaff;
        --color-surface: #f1eef8;
        --color-surface-2: #e7e2f2;
        --color-border: #dcd6ea;
        --color-text: #161826;
        --color-muted: #5a6078;
        --color-accent: #a61fa6;
        --color-accent-2: #1f5fd1;
        --color-accent-contrast: #ffffff;
        --color-code-bg: #f1eef8;
        --color-code-text: #161826;
        --logo-glow: none;
        --syn-comment: #6a7088;
        --syn-keyword: #a61fa6;
        --syn-string: #1b7a45;
        --syn-number: #9a5200;
        --syn-function: #1f5fd1;
        --syn-property: #0b6a8f;
        color-scheme: light;
    }
}

:root[data-theme="light"] {
    --color-bg: #fbfaff;
    --color-surface: #f1eef8;
    --color-surface-2: #e7e2f2;
    --color-border: #dcd6ea;
    --color-text: #161826;
    --color-muted: #5a6078;
    --color-accent: #a61fa6;
    --color-accent-2: #1f5fd1;
    --color-accent-contrast: #ffffff;
    --color-code-bg: #f1eef8;
    --color-code-text: #161826;
    --logo-glow: none;
    --syn-comment: #6a7088;
    --syn-keyword: #a61fa6;
    --syn-string: #1b7a45;
    --syn-number: #9a5200;
    --syn-function: #1f5fd1;
    --syn-property: #0b6a8f;
    color-scheme: light;
}

/* Always-dark scope: the hero and the header that overlays it sit on the
   dark cover image in both modes, so they keep the dark text tokens. */
.on-dark {
    --color-text: #e8eaf0;
    --color-muted: #b4bccd;
    --color-accent: #e070e0;
    --color-border: rgba(232, 234, 240, 0.14);
    --logo-glow: drop-shadow(0 0 14px rgba(192, 64, 192, 0.55));
    color-scheme: dark;
}