/*
 * Unleashed Lab design system tokens (tokens.json, version 1).
 * Light theme is the default. Dark applies when the OS prefers it and the
 * visitor has not chosen Light, or when the visitor chooses Dark.
 */
:root {
    color-scheme: light;
    --bg: #F4F6F6;
    --surface: #FFFFFF;
    --surface-raised: #E4E8E8;
    --border: #BFC1BC;
    --ink: #585758;
    --ink-strong: #1C2625;
    --ink-muted: #636569;
    --brand: #3C5755;
    --on-brand: #FFFFFF;
    --brand-text: #3C5755;
    --steel: #6F828A;
    --accent: #287A6D;
    --on-accent: #FFFFFF;
    --critical: #B23A34;
    --warning: #94620F;
    --clean: #2F7D4F;
    --logo-gray-1: #A6A7A9;
    --logo-gray-2: #75777B;
    --logo-black: #000000;
    --logo-white: #FFFFFF;
    --chart-1: #3C5755;
    --chart-2: #8C7853;
    --chart-3: #287A6D;
    --chart-4: #6F828A;
    --chart-other: #858789;
    --chart-seq-1: #E4E8E8;
    --chart-seq-2: #B9C8C6;
    --chart-seq-3: #8AA5A2;
    --chart-seq-4: #5E807C;
    --chart-seq-5: #3C5755;
    --chart-seq-6: #1C2625;
    --font-sans: 'Red Hat Display', 'Avenir Next', -apple-system, system-ui, 'Segoe UI', sans-serif;
    --font-mono: 'Red Hat Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 72px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #1C2625;
        --surface: #24312F;
        --surface-raised: #2A3D3C;
        --border: #3C5755;
        --ink: #D2D8D7;
        --ink-strong: #F4F6F6;
        --ink-muted: #9EA7A6;
        --brand-text: #8FA3AA;
        --steel: #8FA3AA;
        --accent: #4FB8A7;
        --on-accent: #1C2625;
        --critical: #E9867E;
        --warning: #E0A84A;
        --clean: #5DB585;
        --chart-1: #8FA3AA;
        --chart-2: #C9B48A;
        --chart-3: #4FB8A7;
        --chart-4: #D2D8D7;
        --chart-other: #6F7F7E;
        --chart-seq-1: #2A3D3C;
        --chart-seq-2: #3C5755;
        --chart-seq-3: #5E807C;
        --chart-seq-4: #8AA5A2;
        --chart-seq-5: #B9C8C6;
        --chart-seq-6: #E4E8E8;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1C2625;
    --surface: #24312F;
    --surface-raised: #2A3D3C;
    --border: #3C5755;
    --ink: #D2D8D7;
    --ink-strong: #F4F6F6;
    --ink-muted: #9EA7A6;
    --brand-text: #8FA3AA;
    --steel: #8FA3AA;
    --accent: #4FB8A7;
    --on-accent: #1C2625;
    --critical: #E9867E;
    --warning: #E0A84A;
    --clean: #5DB585;
    --chart-1: #8FA3AA;
    --chart-2: #C9B48A;
    --chart-3: #4FB8A7;
    --chart-4: #D2D8D7;
    --chart-other: #6F7F7E;
    --chart-seq-1: #2A3D3C;
    --chart-seq-2: #3C5755;
    --chart-seq-3: #5E807C;
    --chart-seq-4: #8AA5A2;
    --chart-seq-5: #B9C8C6;
    --chart-seq-6: #E4E8E8;
}