/* ========================================
   BROWSERTRACE ONLINE - SHARED THEME SYSTEM
   WCAG AAA Compliant | Colorblind-Safe
   ======================================== */

:root {
    /* === LIGHT MODE TOKENS === */

    /* Surface Colors - Soft Off-White Neutrals */
    --surface-global: #F4F4F4;           /* IBM Gray 10 - Global background */
    --surface-container: #EBEBEB;        /* Content cards/widgets */
    --surface-elevated: #FFFFFF;         /* Elevated surfaces (white) */

    /* Text Colors - Near-Black for AAA Contrast */
    --text-primary: #161616;             /* IBM Gray 100 - Primary text (AAA: 14.85:1) */
    --text-secondary: #525252;           /* IBM Gray 70 - Secondary text */
    --text-tertiary: #8D8D8D;            /* IBM Gray 50 - Tertiary text */
    --text-on-accent: #FFFFFF;           /* Text on primary accent */

    /* Primary Accent - Corporate Blue */
    --accent-primary: #0057B8;           /* Corporate Information Blue */
    --accent-primary-hover: #003D82;     /* Hover state (darker) */
    --accent-primary-active: #002952;    /* Active/pressed state */
    --accent-secondary: #40B0A6;         /* Modern Teal for focus */

    /* Semantic Colors - Colorblind-Safe & WCAG Compliant */
    --status-success: #04B34F;           /* Success Green (AAA with black text) */
    --status-success-bg: #E8F7EE;        /* Success background */
    --status-danger: #A6192E;            /* Error Red (AAA with white text) */
    --status-danger-bg: #FCEDEF;         /* Error background */
    --status-warning: #FFC20A;           /* Safety Yellow/Gold (AA with black) */
    --status-warning-bg: #FFF7E0;        /* Warning background */
    --status-info: #0C7BDC;              /* Information Blue (AA with white) */
    --status-info-bg: #E5F2FB;           /* Info background */

    /* Borders & Dividers */
    --border-subtle: #D0D0D0;            /* Subtle borders */
    --border-default: #A8A8A8;           /* Default borders */
    --border-emphasis: #161616;          /* Emphasized borders */
}

/* === DARK MODE TOKENS === */
/* Automatic dark mode when system preference is dark AND user hasn't set manual preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Surface Colors - Deep Grays (Not Pure Black) */
        --surface-global: #161616;           /* IBM Gray 100 - Avoids pure black */
        --surface-container: #262626;        /* IBM Gray 90 - Elevated containers */
        --surface-elevated: #393939;         /* IBM Gray 80 - Higher elevation */

        /* Text Colors - Off-White (Not Pure White) */
        --text-primary: #EBEBEB;             /* Off-white (reduces halation) */
        --text-secondary: #C6C6C6;           /* IBM Gray 30 - Secondary */
        --text-tertiary: #8D8D8D;            /* IBM Gray 50 - Tertiary */
        --text-on-accent: #FFFFFF;           /* Text on accent stays white */

        /* Primary Accent - Desaturated for Dark Mode */
        --accent-primary: #009BFF;           /* Desaturated bright blue */
        --accent-primary-hover: #0084D9;     /* Hover (slightly darker) */
        --accent-primary-active: #0066B3;    /* Active state */
        --accent-secondary: #5CC9C0;         /* Lighter teal for dark mode */

        /* Semantic Colors - Adjusted for Dark Backgrounds */
        --status-success: #26D663;           /* Brighter green for visibility */
        --status-success-bg: #0D3A1E;        /* Dark green background */
        --status-danger: #FF6B6B;            /* Brighter red for visibility */
        --status-danger-bg: #3D1319;         /* Dark red background */
        --status-warning: #FFD966;           /* Brighter yellow */
        --status-warning-bg: #3D3319;        /* Dark yellow background */
        --status-info: #4DA8FF;              /* Brighter blue */
        --status-info-bg: #0D2A3D;           /* Dark blue background */

        /* Borders & Dividers */
        --border-subtle: #393939;            /* Subtle borders */
        --border-default: #525252;           /* Default borders */
        --border-emphasis: #8D8D8D;          /* Emphasized borders */
    }
}

/* Manual dark mode override */
:root[data-theme="dark"] {
    /* Surface Colors - Deep Grays (Not Pure Black) */
    --surface-global: #161616;           /* IBM Gray 100 - Avoids pure black */
    --surface-container: #262626;        /* IBM Gray 90 - Elevated containers */
    --surface-elevated: #393939;         /* IBM Gray 80 - Higher elevation */

    /* Text Colors - Off-White (Not Pure White) */
    --text-primary: #EBEBEB;             /* Off-white (reduces halation) */
    --text-secondary: #C6C6C6;           /* IBM Gray 30 - Secondary */
    --text-tertiary: #8D8D8D;            /* IBM Gray 50 - Tertiary */
    --text-on-accent: #FFFFFF;           /* Text on accent stays white */

    /* Primary Accent - Desaturated for Dark Mode */
    --accent-primary: #009BFF;           /* Desaturated bright blue */
    --accent-primary-hover: #0084D9;     /* Hover (slightly darker) */
    --accent-primary-active: #0066B3;    /* Active state */
    --accent-secondary: #5CC9C0;         /* Lighter teal for dark mode */

    /* Semantic Colors - Adjusted for Dark Backgrounds */
    --status-success: #26D663;           /* Brighter green for visibility */
    --status-success-bg: #0D3A1E;        /* Dark green background */
    --status-danger: #FF6B6B;            /* Brighter red for visibility */
    --status-danger-bg: #3D1319;         /* Dark red background */
    --status-warning: #FFD966;           /* Brighter yellow */
    --status-warning-bg: #3D3319;        /* Dark yellow background */
    --status-info: #4DA8FF;              /* Brighter blue */
    --status-info-bg: #0D2A3D;           /* Dark blue background */

    /* Borders & Dividers */
    --border-subtle: #393939;            /* Subtle borders */
    --border-default: #525252;           /* Default borders */
    --border-emphasis: #8D8D8D;          /* Emphasized borders */
}