/**
 * Premium Theme - Semantic Color System
 * Defines color variables that adapt to light/dark mode preferences
 */

/* Primitives */
:root {
    --Blue-100: rgb(218 222 244);
    --Blue-200: rgb(182 190 233);
    --Blue-300: rgb(145 157 221);
    --Blue-400: rgb(109 125 210);
    --Blue-500: rgb(72 92 199);
    --Blue-600: rgb(58 74 159);
    --Blue-700: rgb(43 55 119);
    --Blue-800: rgb(29 37 80);
    --Blue-900: rgb(14 18 40);
    --Bronze-100: rgb(245 229 204);
    --Bronze-200: rgb(236 204 153);
    --Bronze-300: rgb(226 178 102);
    --Bronze-400: rgb(217 153 51);
    --Bronze-500: rgb(207 127 0);
    --Bronze-600: rgb(166 102 0);
    --Bronze-700: rgb(124 76 0);
    --Bronze-800: rgb(83 51 0);
    --Bronze-900: rgb(41 25 0);
    --Cyan-100: rgb(204 234 244);
    --Cyan-200: rgb(153 213 233);
    --Cyan-300: rgb(102 191 222);
    --Cyan-400: rgb(51 170 211);
    --Cyan-500: rgb(0 149 200);
    --Cyan-600: rgb(0 119 160);
    --Cyan-700: rgb(0 89 120);
    --Cyan-800: rgb(0 60 80);
    --Cyan-900: rgb(0 30 40);
    --Dusty-Blue-100: rgb(147 225 252);
    --Dusty-Blue-200: rgb(91 213 255);
    --Dusty-Blue-300: rgb(92 170 209);
    --Dusty-Blue-350: rgb(126 151 172);
    --Dusty-Blue-400: rgb(102 122 138);
    --Dusty-Blue-50: rgb(226 231 235);
    --Dusty-Blue-60: rgb(232, 243, 251);
    --Dusty-Blue-75: rgb(206 217 225);
    --Dusty-Blue-500: rgb(66 105 124);
    --Dusty-Blue-600: rgb(51 81 96);
    --Dusty-Blue-700: rgb(43 64 82);
    --Dusty-Blue-800: rgb(27 49 66);
    --Dusty-Blue-900: rgb(3 28 48);
    --Gold-100: rgb(255 241 210);
    --Gold-200: rgb(255 227 164);
    --Gold-300: rgb(255 212 119);
    --Gold-400: rgb(255 198 73);
    --Gold-500: rgb(255 184 28);
    --Gold-600: rgb(204 147 22);
    --Gold-700: rgb(153 110 17);
    --Gold-800: rgb(102 74 11);
    --Gold-900: rgb(51 37 6);
    --Green-100: rgb(217 239 212);
    --Green-200: rgb(180 223 170);
    --Green-300: rgb(142 208 127);
    --Green-400: rgb(105 192 85);
    --Green-500: rgb(67 176 42);
    --Green-600: rgb(54 141 34);
    --Green-700: rgb(40 106 25);
    --Green-800: rgb(27 70 17);
    --Green-900: rgb(13 35 8);
    --Magenta-100: rgb(249 210 228);
    --Magenta-200: rgb(244 164 201);
    --Magenta-300: rgb(238 119 175);
    --Magenta-400: rgb(233 73 148);
    --Magenta-500: rgb(227 28 121);
    --Magenta-600: rgb(182 22 97);
    --Magenta-700: rgb(136 17 73);
    --Magenta-800: rgb(91 11 48);
    --Magenta-900: rgb(45 6 24);
    --Neutral-100: rgb(239 242 244);
    --Neutral-200: rgb(226 231 235);
    --Neutral-250: rgb(195 199 203);
    --Neutral-300: rgb(191 191 191);
    --Neutral-400: rgb(170 170 170);
    --Neutral-500: rgb(149 149 149);
    --Neutral-600: rgb(119 119 119);
    --Neutral-700: rgb(89 89 89);
    --Neutral-800: rgb(60 60 60);
    --Neutral-900: rgb(30 30 30);
    --Orange-100: rgb(255 225 204);
    --Orange-200: rgb(255 195 153);
    --Orange-300: rgb(255 165 102);
    --Orange-400: rgb(255 135 51);
    --Orange-500: rgb(255 105 0);
    --Orange-600: rgb(204 84 0);
    --Orange-700: rgb(153 63 0);
    --Orange-800: rgb(102 42 0);
    --Orange-900: rgb(51 21 0);
    --Primary-Black: rgb(0 0 0);
    --Primary-Black-50: rgb(0 0 0 / 50%);
    --Primary-White: rgb(255 255 255);
    --Primary-White-10: rgb(255 255 255 / 10%);
    --Primary-White-20: rgb(255 255 255 / 20%);
    --Primary-White-30: rgb(255 255 255 / 30%);
    --Primary-White-40: rgb(255 255 255 / 40%);
    --Primary-White-50: rgb(255 255 255 / 50%);
    --Primary-White-60: rgb(255 255 255 / 60%);
    --Primary-White-70: rgb(255 255 255 / 70%);
    --Primary-White-80: rgb(255 255 255 / 80%);
    --Primary-White-90: rgb(255 255 255 / 90%);
    --Purple-100: rgb(234 210 234);
    --Purple-200: rgb(214 165 213);
    --Purple-300: rgb(193 120 193);
    --Purple-400: rgb(173 75 172);
    --Purple-500: rgb(152 30 151);
    --Purple-600: rgb(122 24 121);
    --Purple-700: rgb(91 18 91);
    --Purple-800: rgb(61 12 60);
    --Purple-900: rgb(30 6 30);
    --Red-100: rgb(254 217 216);
    --Red-200: rgb(253 179 176);
    --Red-300: rgb(251 142 137);
    --Red-400: rgb(250 104 97);
    --Red-500: rgb(249 66 58);
    --Red-600: rgb(199 53 46);
    --Red-700: rgb(149 40 35);
    --Red-800: rgb(100 26 23);
    --Red-900: rgb(50 13 12);
    --Violet-100: rgb(227 216 242);
    --Violet-200: rgb(200 177 229);
    --Violet-300: rgb(172 137 215);
    --Violet-400: rgb(145 98 202);
    --Violet-500: rgb(117 59 189);
    --Violet-600: rgb(94 47 151);
    --Violet-700: rgb(70 35 113);
    --Violet-800: rgb(47 24 76);
    --Violet-900: rgb(23 12 38);
}


/* Light mode colors (default) */
:root {
    --Background-Bold: var(--Primary-White);
    --Background-Bold-Alt: var(--Dusty-Blue-75);
    --Background-Menu-Item-Hover: var(--Neutral-200);
    --Background-Primary: var(--Primary-White);
    --Background-Secondary: var(--Neutral-100);
    --Background-Subtle: var(--Neutral-100);
    --Background-Tertiary: var(--Dusty-Blue-50);
    --Background-Ticker-Card: var(--Primary-White);
    --Border-Primary: var(--Primary-White);
    --Border-Secondary: var(--Neutral-400);
    --Border-Subtle: var(--Neutral-200);
    --Brand-Blue: var(--Blue-500);
    --Brand-Bronze: var(--Bronze-500);
    --Brand-Cyan: var(--Cyan-500);
    --Brand-Gold: var(--Gold-500);
    --Brand-Green: var(--Green-500);
    --Brand-Magenta: var(--Magenta-600);
    --Brand-Orange: var(--Orange-600);
    --Brand-Purple: var(--Purple-500);
    --Brand-Red: var(--Red-500);
    --Brand-Violet: var(--Violet-500);
    --Content-Disabled: var(--Neutral-300);
    --Content-Headline-Link: var(--Neutral-900);
    --Content-Hover: var(--Cyan-700);
    --Content-Link: var(--Cyan-600);
    --Content-Negative: var(--Red-600);
    --Content-Neutral: var(--Neutral-600);
    --Content-Neutral-Bold: var(--Violet-700);
    --Content-Positive: var(--Green-500);
    --Content-Positive-Subtle: var(--Green-700);
    --Content-Primary: var(--Neutral-900);
    --Content-Secondary: var(--Neutral-800);
    --Content-Subtle: var(--Neutral-600);
    --Content-Tertiary: var(--Neutral-700);
    --Content-Ticker-Card: var(--Neutral-900);
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
    :root {
        --Background-Bold: var(--Dusty-Blue-900);
        --Background-Bold-Alt: var(--Dusty-Blue-900);
        --Background-Menu-Item-Hover: var(--Dusty-Blue-700);
        --Background-Primary: var(--Dusty-Blue-600);
        --Background-Secondary: var(--Dusty-Blue-700);
        --Background-Subtle: var(--Dusty-Blue-500);
        --Background-Tertiary: var(--Dusty-Blue-800);
        --Background-Ticker-Card: var(--Neutral-200);
        --Border-Primary: var(--Dusty-Blue-600);
        --Border-Secondary: var(--Dusty-Blue-350);
        --Border-Subtle: var(--Dusty-Blue-500);
        --Brand-Blue: var(--Blue-500);
        --Brand-Bronze: var(--Bronze-500);
        --Brand-Cyan: var(--Cyan-500);
        --Brand-Gold: var(--Gold-500);
        --Brand-Green: var(--Green-500);
        --Brand-Magenta: var(--Magenta-600);
        --Brand-Orange: var(--Orange-600);
        --Brand-Purple: var(--Purple-500);
        --Brand-Red: var(--Red-500);
        --Brand-Violet: var(--Violet-500);
        --Content-Disabled: var(--Neutral-700);
        --Content-Headline-Link: var(--Primary-White);
        --Content-Hover: var(--Dusty-Blue-300);
        --Content-Link: var(--Dusty-Blue-200);
        --Content-Negative: var(--Red-300);
        --Content-Neutral: var(--Neutral-400);
        --Content-Neutral-Bold: var(--Violet-200);
        --Content-Positive: var(--Green-300);
        --Content-Positive-Subtle: var(--Green-200);
        --Content-Primary: var(--Primary-White);
        --Content-Secondary: var(--Neutral-100);
        --Content-Subtle: var(--Neutral-200);
        --Content-Tertiary: var(--Neutral-300);
        --Content-Ticker-Card: var(--Dusty-Blue-900);
    }
}

/* Manual dark mode toggle support */
[data-theme="dark"] {
    --Background-Bold: var(--Dusty-Blue-900);
    --Background-Bold-Alt: var(--Dusty-Blue-900);
    --Background-Menu-Item-Hover: var(--Dusty-Blue-700);
    --Background-Primary: var(--Dusty-Blue-600);
    --Background-Secondary: var(--Dusty-Blue-700);
    --Background-Subtle: var(--Dusty-Blue-500);
    --Background-Subtler: var(--Dusty-Blue-600);
    --Background-Tertiary: var(--Dusty-Blue-800);
    --Background-Ticker-Card: var(--Neutral-200);
    --Border-Primary: var(--Dusty-Blue-600);
    --Border-Secondary: var(--Dusty-Blue-350);
    --Border-Subtle: var(--Dusty-Blue-500);
    --Brand-Blue: var(--Blue-500);
    --Brand-Bronze: var(--Bronze-500);
    --Brand-Cyan: var(--Cyan-500);
    --Brand-Gold: var(--Gold-500);
    --Brand-Green: var(--Green-500);
    --Brand-Magenta: var(--Magenta-600);
    --Brand-Orange: var(--Orange-600);
    --Brand-Purple: var(--Purple-500);
    --Brand-Red: var(--Red-500);
    --Brand-Violet: var(--Violet-500);
    --Content-Disabled: var(--Neutral-700);
    --Content-Headline-Link: var(--Primary-White);
    --Content-Hover: var(--Dusty-Blue-300);
    --Content-Link: var(--Dusty-Blue-200);
    --Content-Negative: var(--Red-300);
    --Content-Neutral: var(--Neutral-400);
    --Content-Neutral-Bold: var(--Violet-200);
    --Content-Positive: var(--Green-300);
    --Content-Positive-Subtle: var(--Green-200);
    --Content-Primary: var(--Primary-White);
    --Content-Secondary: var(--Neutral-100);
    --Content-Subtle: var(--Neutral-200);
    --Content-Tertiary: var(--Neutral-300);
    --Content-Ticker-Card: var(--Dusty-Blue-900);
}

[data-theme="light"] {
    --Background-Bold: var(--Primary-White);
    --Background-Bold-Alt: var(--Dusty-Blue-75);
    --Background-Menu-Item-Hover: var(--Neutral-200);
    --Background-Primary: var(--Primary-White);
    --Background-Secondary: var(--Neutral-100);
    --Background-Subtle: var(--Neutral-100);
    --Background-Subtler: var(--Dusty-Blue-60);
    --Background-Tertiary: var(--Dusty-Blue-50);
    --Background-Ticker-Card: var(--Primary-White);
    --Border-Primary: var(--Primary-White);
    --Border-Secondary: var(--Neutral-400);
    --Border-Subtle: var(--Neutral-200);
    --Brand-Blue: var(--Blue-500);
    --Brand-Bronze: var(--Bronze-500);
    --Brand-Cyan: var(--Cyan-500);
    --Brand-Gold: var(--Gold-500);
    --Brand-Green: var(--Green-500);
    --Brand-Magenta: var(--Magenta-600);
    --Brand-Orange: var(--Orange-600);
    --Brand-Purple: var(--Purple-500);
    --Brand-Red: var(--Red-500);
    --Brand-Violet: var(--Violet-500);
    --Content-Disabled: var(--Neutral-300);
    --Content-Headline-Link: var(--Neutral-900);
    --Content-Hover: var(--Cyan-700);
    --Content-Link: var(--Cyan-600);
    --Content-Negative: var(--Red-600);
    --Content-Neutral: var(--Neutral-600);
    --Content-Neutral-Bold: var(--Violet-700);
    --Content-Positive: var(--Green-500);
    --Content-Positive-Subtle: var(--Green-700);
    --Content-Primary: var(--Neutral-900);
    --Content-Secondary: var(--Neutral-800);
    --Content-Subtle: var(--Neutral-600);
    --Content-Tertiary: var(--Neutral-700);
    --Content-Ticker-Card: var(--Neutral-900);
}

/* Global focus and selection styles */
:focus-visible {
    outline: 2px solid var(--color-focus, aliceblue);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-focus-ring, aliceblue);
}

::selection {
    background-color: var(--color-selection, #ddd);
    color: var(--color-text-primary, #000);
}

/* Utility classes for common color applications */
.color-bg-primary {
    background-color: var(--color-background-primary);
}

.color-bg-secondary {
    background-color: var(--color-background-secondary);
}

.color-bg-tertiary {
    background-color: var(--color-background-tertiary);
}

.color-surface {
    background-color: var(--color-surface);
}

.color-surface-elevated {
    background-color: var(--color-surface-elevated);
}

.color-text-primary {
    color: var(--color-text-primary);
}

.color-text-secondary {
    color: var(--color-text-secondary);
}

.color-text-muted {
    color: var(--color-text-muted);
}

.color-accent {
    color: var(--color-accent);
}

.color-bg-accent {
    background-color: var(--color-accent);
    color: var(--color-background-primary);
}

.color-border {
    border-color: var(--color-border);
}

.color-border-light {
    border-color: var(--color-border-light);
}

/* State utility classes */
.color-success {
    color: var(--color-success);
}

.color-bg-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.color-warning {
    color: var(--color-warning);
}

.color-bg-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.color-error {
    color: var(--color-error);
}

.color-bg-error {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

.color-info {
    color: var(--color-info);
}

.color-bg-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
}