/*
 * Design tokens.
 */
:root {
    color-scheme: light;

    /* Brand */
    --color-primary: #0033a1;
    --color-primary-strong: #002580;
    --color-primary-contrast: #ffffff;
    --color-primary-soft: #eaf0fb;
    --color-accent-teal: #0098a7;
    --color-accent-gold: #f8b410;

    /* Surfaces */
    --color-bg: #f5f7fb;
    --color-surface: #ffffff;
    --color-surface-sunken: #f7f7f7;
    --color-border: #d8e1ec;
    --color-border-strong: #b4c2d3;
    --color-hover: #f0f4fa;
    --color-backdrop: rgb(0 4 35 / 0.5);

    /* Text */
    --color-text: #212529;
    --color-text-muted: #5f6f7d;
    --color-link: var(--color-primary);

    /* Table */
    --color-table-header-bg: #eef2f8;
    --color-row-alt: #fafbfd;
    --color-row-hover: #f0f4fa;
    --color-row-selected: #e3ecfa;

    /* Status tones: fg / bg / border */
    --color-success: #1b7a3d;
    --color-success-bg: #eaf6ee;
    --color-success-border: #b3dec1;
    --color-warning: #8a5a00;
    --color-warning-bg: #fff6dd;
    --color-warning-border: #f6d27a;
    --color-danger: #c8001f;
    --color-danger-bg: #fdecee;
    --color-danger-border: #f5b7c0;
    --color-info: #007784;
    --color-info-bg: #e5f5f6;
    --color-info-border: #a6dce1;
    --color-neutral: #5f6f7d;
    --color-neutral-bg: #eef1f5;
    --color-neutral-border: #d8e1ec;

    /* Navigation chrome */
    --color-nav-bg: #041333;
    --color-nav-active: #0b2a66;
    --color-nav-hover: rgb(255 255 255 / 0.06);
    --color-nav-text: #b7c2d6;
    --color-nav-text-strong: #ffffff;

    /* Focus */
    --color-focus: var(--color-primary);
    --focus-ring: 0 0 0 3px rgb(0 51 161 / 0.28);

    /* Typography */
    --font-sans: 'Lato', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --text-xs: 11px; /* overline / caps labels */
    --text-sm: 12px; /* captions */
    --text-md: 13px; /* table cells, dense body */
    --text-base: 14px; /* body */
    --text-lg: 15px; /* section headings */
    --text-xl: 20px; /* page headings */
    --text-kpi: 22px;
    --leading-tight: 1.25;
    --leading: 1.45;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Spacing: 4px grid */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Shape */
    --radius-control: 5px;
    --radius-base: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;
    --border-width: 1px;

    /* Sizing */
    --control-h: 30px;
    --control-h-sm: 24px;
    --row-h: 32px;
    --icon-size: 16px;
    --sidebar-w: 256px;
    --sidebar-rail-w: 64px;
    --topbar-h: 48px;
    --dialog-w: 560px;
    --dialog-w-lg: 760px;
    --drawer-w: 420px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgb(4 19 51 / 0.06);
    --shadow-md: 0 8px 24px rgb(4 19 51 / 0.14);
    --shadow-lg: 0 20px 50px rgb(0 35 110 / 0.18);

    /* Layers */
    --z-sticky: 2;
    --z-menu: 30;
    --z-drawer: 40;
    --z-toast: 60;

    /* Motion */
    --transition-fast: 0.15s ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-primary: #7ea2f5;
        --color-primary-strong: #a6c0fa;
        --color-primary-contrast: #041333;
        --color-primary-soft: #14284f;
        --color-bg: #0a1224;
        --color-surface: #101b33;
        --color-surface-sunken: #0d172c;
        --color-border: #23324f;
        --color-border-strong: #34476b;
        --color-hover: #16233f;
        --color-text: #e6ebf5;
        --color-text-muted: #9fadc4;
        --color-table-header-bg: #15223d;
        --color-row-alt: #0f1a31;
        --color-row-hover: #17264a;
        --color-row-selected: #1b2f5c;
        --color-success: #6fd59a;
        --color-success-bg: #0f2a1c;
        --color-success-border: #1f5537;
        --color-warning: #f6c65b;
        --color-warning-bg: #2c2410;
        --color-warning-border: #5a4614;
        --color-danger: #ff8a98;
        --color-danger-bg: #331219;
        --color-danger-border: #66222f;
        --color-info: #6fd3dd;
        --color-info-bg: #0d2a2e;
        --color-info-border: #1b5359;
        --color-neutral: #9fadc4;
        --color-neutral-bg: #1a2742;
        --color-neutral-border: #2b3b5c;
        --color-nav-bg: #050d1f;
        --color-nav-active: #13285a;
        --focus-ring: 0 0 0 3px rgb(126 162 245 / 0.35);
    }
}