/* Design tokens: color, spacing and typography custom properties. */
:root {
    color-scheme: light dark;

    /* Typography */
    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.75rem;
    --line-height-tight: 1.2;
    --line-height-base: 1.6;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Radii / shadows */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.08);

    /* Brand */
    --color-brand-500: #0071c1;
    --color-brand-600: #0071c1;
    /* Lightened for dark-mode text/link contrast: #0071c1 on our dark background falls just under WCAG AA (4.1:1); this hits ~4.9:1. */
    --color-brand-400: #1c86d8;

    /* Light theme (default) */
    --color-bg: #ffffff;
    --color-bg-subtle: #f4f6fb;
    --color-surface: #ffffff;
    --color-border: #e2e5ec;
    --color-text: #15181f;
    --color-text-muted: #525966;
    --color-accent: var(--color-brand-500);
    --color-accent-contrast: #ffffff;
    --focus-ring: 0 0 0 3px rgb(0 113 193 / 0.45);

    --container-max: 72rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #0f1216;
        --color-bg-subtle: #171b21;
        --color-surface: #1b2029;
        --color-border: #2a303b;
        --color-text: #eef1f6;
        --color-text-muted: #a3acba;
        --color-accent: var(--color-brand-400);
        --color-accent-contrast: #0f1216;
    }
}

:root[data-theme="dark"] {
    --color-bg: #0f1216;
    --color-bg-subtle: #171b21;
    --color-surface: #1b2029;
    --color-border: #2a303b;
    --color-text: #eef1f6;
    --color-text-muted: #a3acba;
    --color-accent: var(--color-brand-400);
    --color-accent-contrast: #0f1216;
}