:root {
    color-scheme: light;

    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-subtle: #ffffff;
    --color-surface-accent: #f2f4ff;
    --color-text: #0b132b;
    --color-text-muted: #52617a;
    --color-text-subtle: #718096;
    --color-border: #dfe5ef;
    --color-border-strong: #b8c2d3;
    --color-accent: #3155ff;
    --color-accent-hover: #2446e8;
    --color-focus: #3155ff;
    --color-danger: #c83232;
    --color-code-keyword: #6d28d9;
    --color-code-string: #a23a00;
    --color-code-number: #08745b;
    --color-code-comment: #65748b;

    --gradient-accent: linear-gradient(135deg, #3155ff 0%, #5839ff 100%);

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-3xl: clamp(2rem, 4vw, 3rem);

    --line-tight: 1.08;
    --line-heading: 1.2;
    --line-body: 1.65;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(11 19 43 / 0.05);
    --shadow-md: 0 12px 32px rgb(25 39 78 / 0.08);

    --site-gutter: clamp(1rem, 4vw, 2rem);
    --site-width: 80rem;
    --article-width: 60rem;
    --header-height: 6.25rem;

    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;
}

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

    --color-background: #090d18;
    --color-surface: #101625;
    --color-surface-subtle: #151c2d;
    --color-surface-accent: #171c3a;
    --color-text: #f5f7ff;
    --color-text-muted: #aab4ca;
    --color-text-subtle: #8490aa;
    --color-border: #273149;
    --color-border-strong: #3a4765;
    --color-accent: #7087ff;
    --color-accent-hover: #8da0ff;
    --color-focus: #8da0ff;
    --color-danger: #ff7777;
    --color-code-keyword: #c4b5fd;
    --color-code-string: #fdba74;
    --color-code-number: #5eead4;
    --color-code-comment: #aab4ca;

    --gradient-accent: linear-gradient(135deg, #5d76ff 0%, #895eff 100%);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
    --shadow-md: 0 16px 36px rgb(0 0 0 / 0.28);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --color-background: #090d18;
        --color-surface: #101625;
        --color-surface-subtle: #151c2d;
        --color-surface-accent: #171c3a;
        --color-text: #f5f7ff;
        --color-text-muted: #aab4ca;
        --color-text-subtle: #8490aa;
        --color-border: #273149;
        --color-border-strong: #3a4765;
        --color-accent: #7087ff;
        --color-accent-hover: #8da0ff;
        --color-focus: #8da0ff;
        --color-danger: #ff7777;
        --color-code-keyword: #c4b5fd;
        --color-code-string: #fdba74;
        --color-code-number: #5eead4;
        --color-code-comment: #aab4ca;
        --gradient-accent: linear-gradient(135deg, #5d76ff 0%, #895eff 100%);
        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
        --shadow-md: 0 16px 36px rgb(0 0 0 / 0.28);
    }
}

@media (max-width: 40rem) {
    :root {
        --header-height: 5rem;
        --site-gutter: 1rem;
    }
}