/* Design tokens — light (default) and dark. Swap values here, never in components. */
:root {
    /* Brand */
    --accent-h: 199;
    --accent: #0f5c7a;
    --accent-strong: #0a3f54;
    --accent-soft: #e4eef1;
    --accent-contrast: #ffffff;

    /* Surfaces */
    --bg: #f6f8f7;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --sidebar-bg: #0b2b3a;
    --sidebar-bg-hover: #123c4f;
    --sidebar-text: #cfe3ea;
    --sidebar-text-muted: #7fa3b3;
    --sidebar-active-bg: #0f5c7a;
    --sidebar-active-text: #ffffff;
    --border: #e3e7e6;
    --border-strong: #cfd6d4;
    --overlay: rgba(10, 20, 22, 0.45);

    /* Text */
    --text: #161a19;
    --text-muted: #5b6664;
    --text-faint: #8b9593;
    --text-on-accent: #ffffff;

    /* Status */
    --status-green-bg: #e3f3e6;
    --status-green-fg: #1c6b34;
    --status-orange-bg: #fbeedd;
    --status-orange-fg: #9a5b0a;
    --status-red-bg: #fbe6e4;
    --status-red-fg: #b3261e;
    --status-blue-bg: #e3eef8;
    --status-blue-fg: #1a5da8;
    --status-gray-bg: #eceeed;
    --status-gray-fg: #5b6664;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(20, 30, 32, 0.06);
    --shadow-md: 0 4px 12px rgba(20, 30, 32, 0.08);
    --shadow-lg: 0 12px 32px rgba(10, 20, 22, 0.16);

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Spacing scale (8px grid) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 16px;
    --sp-4: 24px;
    --sp-5: 32px;
    --sp-6: 48px;

    /* Type */
    --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --fs-xs: 0.8rem;
    --fs-sm: 0.9rem;
    --fs-base: 1rem;
    --fs-md: 1.15rem;
    --fs-lg: 1.4rem;
    --fs-xl: 1.75rem;

    /* Layout */
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 64px;
}

/* Dark mode: explicit choice via [data-theme="dark"], or prefers-color-scheme when no choice stored */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #10151a;
        --surface: #182027;
        --surface-raised: #1c252d;
        --sidebar-bg: #0a1216;
        --sidebar-bg-hover: #101c22;
        --sidebar-text: #c3d6dc;
        --sidebar-text-muted: #6c8892;
        --sidebar-active-bg: #14708f;
        --sidebar-active-text: #ffffff;
        --border: #2a343c;
        --border-strong: #3a4750;
        --overlay: rgba(0, 0, 0, 0.6);

        --text: #eaf0ee;
        --text-muted: #a7b4b0;
        --text-faint: #7c8a86;

        --accent: #237999;
        --accent-strong: #185b73;
        --accent-soft: #16303a;

        --status-green-bg: #143523;
        --status-green-fg: #5fd487;
        --status-orange-bg: #3a2a10;
        --status-orange-fg: #f0ad5c;
        --status-red-bg: #3a1a18;
        --status-red-fg: #f38f88;
        --status-blue-bg: #182d40;
        --status-blue-fg: #7cb3ec;
        --status-gray-bg: #232b30;
        --status-gray-fg: #a7b4b0;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    }
}

:root[data-theme="dark"] {
    --bg: #10151a;
    --surface: #182027;
    --surface-raised: #1c252d;
    --sidebar-bg: #0a1216;
    --sidebar-bg-hover: #101c22;
    --sidebar-text: #c3d6dc;
    --sidebar-text-muted: #6c8892;
    --sidebar-active-bg: #14708f;
    --sidebar-active-text: #ffffff;
    --border: #2a343c;
    --border-strong: #3a4750;
    --overlay: rgba(0, 0, 0, 0.6);

    --text: #eaf0ee;
    --text-muted: #a7b4b0;
    --text-faint: #7c8a86;

    --accent: #237999;
    --accent-strong: #185b73;
    --accent-soft: #16303a;

    --status-green-bg: #143523;
    --status-green-fg: #5fd487;
    --status-orange-bg: #3a2a10;
    --status-orange-fg: #f0ad5c;
    --status-red-bg: #3a1a18;
    --status-red-fg: #f38f88;
    --status-blue-bg: #182d40;
    --status-blue-fg: #7cb3ec;
    --status-gray-bg: #232b30;
    --status-gray-fg: #a7b4b0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}