/*
  Design tokens. Verdict colors (green/amber/red) are reserved exclusively for verdict
  signaling — see design doc §4 — and are never reused decoratively elsewhere in this file
  or app.css. Every verdict also carries a distinct icon and text label so color is never the
  only signal (colorblind-safe: this is a chosen triad that stays distinguishable under
  deuteranopia/protanopia/tritanopia, not a plain saturated red/green pair).
*/

:root {
    /* Verdict colors — reserved, do not reuse decoratively */
    --verdict-green: #2E7D32;
    --verdict-green-bg: #E8F5E9;
    --verdict-green-border: #A5D6A7;
    --verdict-amber: #B25E00;
    --verdict-amber-bg: #FFF3E0;
    --verdict-amber-border: #FFCC80;
    --verdict-red: #B00020;
    --verdict-red-bg: #FDECEA;
    --verdict-red-border: #F1A9A0;
    --verdict-unknown: #5C6370;
    --verdict-unknown-bg: #EEEFF1;
    --verdict-unknown-border: #C7CAD1;

    /* Single accent color for interactive elements — never one of the verdict colors */
    --accent: #1D4E89;
    --accent-hover: #163B68;
    --accent-contrast: #FFFFFF;

    /* Neutral surfaces/text (light) */
    --surface: #FFFFFF;
    --surface-raised: #F7F8FA;
    --surface-sunken: #EEEFF1;
    --border: #D7DAE0;
    --text: #1A1D23;
    --text-muted: #4B505C;
    --focus-ring: #1D4E89;

    /* Type scale — 18px+ base per design doc, adjustable independent of OS scaling */
    --font-scale: 1;
    --font-size-base: calc(18px * var(--font-scale));
    --font-size-sm: calc(15px * var(--font-scale));
    --font-size-lg: calc(22px * var(--font-scale));
    --font-size-xl: calc(28px * var(--font-scale));
    --font-size-xxl: calc(36px * var(--font-scale));

    --radius: 12px;
    --radius-lg: 20px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;

    --font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #14161A;
        --surface-raised: #1D2026;
        --surface-sunken: #0E1013;
        --border: #33363E;
        --text: #EDEEF2;
        --text-muted: #B3B7C2;
        --accent: #6FA6E0;
        --accent-hover: #8FBAEA;
        --accent-contrast: #0B1220;
        --focus-ring: #8FBAEA;

        --verdict-green: #66BB6A;
        --verdict-green-bg: #16241A;
        --verdict-green-border: #2E7D32;
        --verdict-amber: #FFA94D;
        --verdict-amber-bg: #2A1D0E;
        --verdict-amber-border: #B25E00;
        --verdict-red: #FF6B6B;
        --verdict-red-bg: #2B1416;
        --verdict-red-border: #B00020;
        --verdict-unknown: #9AA0AC;
        --verdict-unknown-bg: #1C1E22;
        --verdict-unknown-border: #4B505C;
    }
}

:root[data-theme="dark"] {
    --surface: #14161A;
    --surface-raised: #1D2026;
    --surface-sunken: #0E1013;
    --border: #33363E;
    --text: #EDEEF2;
    --text-muted: #B3B7C2;
    --accent: #6FA6E0;
    --accent-hover: #8FBAEA;
    --accent-contrast: #0B1220;
    --focus-ring: #8FBAEA;

    --verdict-green: #66BB6A;
    --verdict-green-bg: #16241A;
    --verdict-green-border: #2E7D32;
    --verdict-amber: #FFA94D;
    --verdict-amber-bg: #2A1D0E;
    --verdict-amber-border: #B25E00;
    --verdict-red: #FF6B6B;
    --verdict-red-bg: #2B1416;
    --verdict-red-border: #B00020;
    --verdict-unknown: #9AA0AC;
    --verdict-unknown-bg: #1C1E22;
    --verdict-unknown-border: #4B505C;
}

/* High-contrast mode toggle (Settings page writes this attribute) */
:root[data-high-contrast="true"] {
    --border: #000000;
    --text: #000000;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --accent: #003C82;
    --accent-hover: #002A5C;
    --verdict-green: #005B10;
    --verdict-green-bg: #FFFFFF;
    --verdict-green-border: #005B10;
    --verdict-amber: #7A3D00;
    --verdict-amber-bg: #FFFFFF;
    --verdict-amber-border: #7A3D00;
    --verdict-red: #7A000F;
    --verdict-red-bg: #FFFFFF;
    --verdict-red-border: #7A000F;
    --focus-ring: #000000;
}

:root[data-theme="dark"][data-high-contrast="true"] {
    --border: #FFFFFF;
    --text: #FFFFFF;
    --surface: #000000;
    --surface-raised: #000000;
    --accent: #9FC6FF;
    --accent-hover: #C4DDFF;
    --verdict-green: #6CFF8F;
    --verdict-green-bg: #000000;
    --verdict-green-border: #6CFF8F;
    --verdict-amber: #FFC46B;
    --verdict-amber-bg: #000000;
    --verdict-amber-border: #FFC46B;
    --verdict-red: #FF9B9B;
    --verdict-red-bg: #000000;
    --verdict-red-border: #FF9B9B;
    --focus-ring: #FFFFFF;
}