:root {
    --sev-critical: #D93025;
    --sev-high:     #E06A1B;
    --sev-medium:   #C79A22;
    /* The band that asks for nothing - deliberately the least saturated
       thing on the page. */
    --sev-low:      #6E8C3A;
    --sev-info:     #6B7A85;

    /* Exigent is a FLAG layered on Immediate, never a sixth band. Its hue
       is deliberately distinct from every band color so it cannot be
       misread as "higher than Critical". Render it as a badge; never as a
       band color and never as a slice of a distribution. */
    --exigent:      #E0447C;

    /* Black or white per band - whichever clears WCAG AA as text ON that
       band's fill, resolved in config/severity_palette.py rather than by
       eye. Only a *filled* priority surface needs it: the hero card's
       recommended-action button. It is a token because the alternative
       was a template writing the hex into a style attribute, and inline
       style attributes are what kept 'unsafe-inline' in the CSP. */
    --ink-critical: #FFFFFF;
    --ink-high: #000000;
    --ink-medium: #000000;
    --ink-low: #000000;
    --ink-info: #000000;
    --ink-exigent: #000000;

    /* How much severity color sits behind text. The hues above are fixed;
       only the *amount* changes between dark and light presets, which is
       one variable per preset rather than a second palette. Percentages,
       not decimals - color-mix() rejects 0.16. */
    --sev-wash: 16%;
    --sev-edge: 42%;

    --font-ui:   "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --radius:       10px;  /* cards, panels, notes */
    --radius-input:  7px;  /* buttons, selects, score block */
    --radius-pill:   5px;  /* pills, chips, flags */
    --radius-token:  4px;  /* CVE tokens */
    --rail:        268px;  /* sidebar width */
    --main-cap:   2100px;  /* content column cap; the top bar on an
                             ultrawide aligns its contents to this,
                             so the two must not be stated twice */
}

:root {
    --page:        #0D1417;
    --card:        #182124;
    --card-strong: #202B2E;
    --border:      #334246;
    --text:        #E1E7E5;
    --muted:       #B3BEBB;
    --muted-strong: #C8D0CE;
    --a1:          #629793;  /* muted teal */
    --a2:          #A88363;  /* rust */
    --a3:          #C1A66A;  /* amber */
    --a4:          #8A82A0;  /* lavender */
    --nav-group:   #E8B33D;  /* 9.7:1 on --page */
    --on-accent:   #0D1417;
    color-scheme: dark;

    --border-strong: color-mix(in srgb, var(--border) 58%, var(--text));
    --sev-critical-on-wash: #E5726B;
    --sev-high-on-wash: #E5823F;
    --sev-medium-on-wash: #C79A22;
    --sev-low-on-wash: #8BA361;
    --sev-info-on-wash: #8F9AA2;
    --sev-exigent-on-wash: #E7719B;
    --a1: #6F9F9C;
    --a1-on-wash: #78A6A2;
    --a2: #B18F73;
    --a2-on-wash: #B6977C;
    --a3: #C1A66A;
    --a3-on-wash: #C1A66A;
    --a4: #9891AB;
    --a4-on-wash: #9F98B1;
}

:root[data-theme="retro"] {
    --page:        #0D1417;
    --card:        #182124;
    --card-strong: #202B2E;
    --border:      #334246;
    --text:        #E1E7E5;
    --muted:       #B3BEBB;
    --muted-strong: #C8D0CE;
    --a1:          #629793;  /* muted teal */
    --a2:          #A88363;  /* rust */
    --a3:          #C1A66A;  /* amber */
    --a4:          #8A82A0;  /* lavender */
    --nav-group:   #E8B33D;  /* 9.7:1 on --page */
    --on-accent:   #0D1417;
    color-scheme: dark;

    --border-strong: color-mix(in srgb, var(--border) 58%, var(--text));
    --sev-critical-on-wash: #E5726B;
    --sev-high-on-wash: #E5823F;
    --sev-medium-on-wash: #C79A22;
    --sev-low-on-wash: #8BA361;
    --sev-info-on-wash: #8F9AA2;
    --sev-exigent-on-wash: #E7719B;
    --a1: #6F9F9C;
    --a1-on-wash: #78A6A2;
    --a2: #B18F73;
    --a2-on-wash: #B6977C;
    --a3: #C1A66A;
    --a3-on-wash: #C1A66A;
    --a4: #9891AB;
    --a4-on-wash: #9F98B1;
}

:root[data-theme="ivory"] {
    --page:        #FDF9F2;
    --card:        #FAF5E7;
    --card-strong: #F3ECD9;
    --border:      #D6C9B6;
    --text:        #3B2A31;
    --muted:       #5D5458;
    --muted-strong: #4B4447;
    --a1:          #7E7A33;  /* olive */
    --a2:          #683D49;  /* plum */
    --a3:          #A8763F;  /* warm ochre */
    --a4:          #55606B;  /* slate */
    --nav-group:   #7D5115;  /* 6.5:1 on cream */
    --on-accent:   #FDF9F2;
    --sev-wash: 11%;
    --sev-edge: 34%;
    color-scheme: light;

    --border-strong: color-mix(in srgb, var(--border) 58%, var(--text));
    --sev-critical-on-wash: #B2271E;
    --sev-high-on-wash: #984812;
    --sev-medium-on-wash: #775C14;
    --sev-low-on-wash: #4F652A;
    --sev-info-on-wash: #535F68;
    --sev-exigent-on-wash: #A6325C;
    --a1: #6C692C;
    --a1-on-wash: #605D27;
    --a2: #683D49;
    --a2-on-wash: #683D49;
    --a3: #865E32;
    --a3-on-wash: #79552D;
    --a4: #55606B;
    --a4-on-wash: #505A65;
}

:root[data-theme="crimson"] {
    --page:        #050813;
    --card:        #100D18;
    --card-strong: #17131F;
    --border:      #4A2030;
    --text:        #F0E8DC;
    --muted:       #AFA4AE;
    --muted-strong: #C8C1C8;
    --a1:          #C5152F;  /* crimson */
    --a2:          #8C3BB5;  /* violet */
    --a3:          #D6B56A;  /* warm gold */
    --a4:          #D3263D;  /* bright red */
    --nav-group:   #E8B33D;  /* 10.4:1 on --page */
    --on-accent:   #F0E8DC;
    color-scheme: dark;

    --border-strong: color-mix(in srgb, var(--border) 58%, var(--text));
    --sev-critical-on-wash: #E15E55;
    --sev-high-on-wash: #E06A1B;
    --sev-medium-on-wash: #C79A22;
    --sev-low-on-wash: #7A954A;
    --sev-info-on-wash: #808D96;
    --sev-exigent-on-wash: #E45A8C;
    --a1: #D65B6D;
    --a1-on-wash: #D86072;
    --a2: #A86AC7;
    --a2-on-wash: #AC72CA;
    --a3: #D6B56A;
    --a3-on-wash: #D6B56A;
    --a4: #DD5668;
    --a4-on-wash: #DE5E6F;
}

:root[data-theme="emerald"] {
    --page:        #06110D;
    --card:        #0D2018;
    --card-strong: #122A20;
    --border:      #294638;
    --text:        #E8F2EC;
    --muted:       #A7BCB0;
    --muted-strong: #C5D3CB;
    --a1:          #20C968;
    --a2:          #29D86F;
    --a3:          #7FB79A;
    --a4:          #4F8F72;
    --nav-group:   #E8B33D;  /* 10.0:1 on --page */
    --on-accent:   #06110D;
    color-scheme: dark;

    --border-strong: color-mix(in srgb, var(--border) 58%, var(--text));
    --sev-critical-on-wash: #E46A62;
    --sev-high-on-wash: #E47C36;
    --sev-medium-on-wash: #C79A22;
    --sev-low-on-wash: #88A15D;
    --sev-info-on-wash: #8C97A0;
    --sev-exigent-on-wash: #E66996;
    --a1: #20C968;
    --a1-on-wash: #20C968;
    --a2: #29D86F;
    --a2-on-wash: #29D86F;
    --a3: #7FB79A;
    --a3-on-wash: #7FB79A;
    --a4: #649C83;
    --a4-on-wash: #6FA38B;
}