/*
 * FR-UX-001 — design system tokens.
 *
 * Every colour, space and radius in the app comes from a custom property declared here.
 * Feature CSS must never hard-code a hex value; that is what makes the light/dark toggle
 * (NFR-ACC-001) a one-line change rather than an audit of every stylesheet.
 *
 * Contrast: text/background pairs below are checked against WCAG 2.1 AA (4.5:1 body,
 * 3:1 large text and UI boundaries). Re-check with a contrast tool before changing any pair.
 */

:root {
    color-scheme: light dark;

    /* --- Spacing scale (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;

    /* --- Radii --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* --- Typography --- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    --leading-tight: 1.25;
    --leading-normal: 1.6;

    /* --- Elevation --- */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

    /* --- Motion (respect prefers-reduced-motion below) --- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    --layout-max: 72rem;
    --focus-ring: 2px solid var(--color-focus);
    --focus-offset: 2px;
}

/* --- Light theme (default) --- */
:root,
[data-theme="light"] {
    --color-bg: #ffffff;
    --color-bg-subtle: #f6f7f9;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-border: #d8dce3;
    --color-border-strong: #b3bac5;

    --color-text: #14181f;
    --color-text-muted: #5b6472;
    --color-text-inverse: #ffffff;

    --color-accent: #1d4ed8;
    --color-accent-hover: #1e40af;
    --color-accent-subtle: #eff4ff;

    --color-success: #15803d;
    --color-success-subtle: #eefaf1;
    --color-warning: #a16207;
    --color-warning-subtle: #fdf6e3;
    --color-danger: #b91c1c;
    --color-danger-subtle: #fdf0f0;

    --color-focus: #1d4ed8;
}

/* --- Dark theme --- */
[data-theme="dark"] {
    --color-bg: #10141a;
    --color-bg-subtle: #161b23;
    --color-surface: #181d26;
    --color-surface-raised: #1f2530;
    --color-border: #2c3441;
    --color-border-strong: #3d4757;

    --color-text: #e8ecf2;
    --color-text-muted: #9aa5b4;
    --color-text-inverse: #10141a;

    --color-accent: #7aa2ff;
    --color-accent-hover: #9bbaff;
    --color-accent-subtle: #1a2439;

    --color-success: #5ed08a;
    --color-success-subtle: #14251b;
    --color-warning: #e3b341;
    --color-warning-subtle: #2a2313;
    --color-danger: #ff8080;
    --color-danger-subtle: #2c1717;

    --color-focus: #9bbaff;
}

/* Users who have not chosen a theme get their OS preference. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-bg: #10141a;
        --color-bg-subtle: #161b23;
        --color-surface: #181d26;
        --color-surface-raised: #1f2530;
        --color-border: #2c3441;
        --color-border-strong: #3d4757;

        --color-text: #e8ecf2;
        --color-text-muted: #9aa5b4;
        --color-text-inverse: #10141a;

        --color-accent: #7aa2ff;
        --color-accent-hover: #9bbaff;
        --color-accent-subtle: #1a2439;

        --color-success: #5ed08a;
        --color-success-subtle: #14251b;
        --color-warning: #e3b341;
        --color-warning-subtle: #2a2313;
        --color-danger: #ff8080;
        --color-danger-subtle: #2c1717;

        --color-focus: #9bbaff;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
    }
}