:root {
    color-scheme: light;

    --color-background-rgb: 245 247 250;
    --color-surface-rgb: 255 255 255;
    --color-surface-elevated-rgb: 255 255 255;
    --color-surface-highlight-rgb: 237 240 245;
    --color-primary-rgb: 29 78 216;
    --color-secondary-rgb: 220 38 38;
    --color-text-main-rgb: 26 29 43;
    --color-text-muted-rgb: 107 114 128;
    --color-text-dark-rgb: 255 255 255;
    --color-status-available-rgb: 5 150 105;
    --color-status-unavailable-rgb: 156 163 175;
    --color-team-a-rgb: 29 78 216;
    --color-team-b-rgb: 234 88 12;

    --color-background: rgb(var(--color-background-rgb));
    --color-surface: rgb(var(--color-surface-rgb));
    --color-surface-elevated: rgb(var(--color-surface-elevated-rgb));
    --color-surface-highlight: rgb(var(--color-surface-highlight-rgb));
    --color-primary: rgb(var(--color-primary-rgb));
    --color-primary-strong: #1E40AF;
    --color-primary-soft: rgb(var(--color-primary-rgb) / 0.1);
    --color-primary-border: rgb(var(--color-primary-rgb) / 0.28);
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-text-main: rgb(var(--color-text-main-rgb));
    --color-text-muted: rgb(var(--color-text-muted-rgb));
    --color-text-subtle: #94A3B8;
    --color-border: #E5E7EB;
    --color-border-strong: #CBD5E1;
    --color-border-soft: #EEF2F7;
    --color-card-muted: #F8FAFC;
    --color-card-muted-strong: #F1F5F9;
    --color-logo-gradient-start: #F3F4F6;
    --color-logo-gradient-end: #E5E7EB;
    --color-llm-avatar-bg: #F8FAFC;
    --color-llm-avatar-border: #FFFFFF;
    --color-scrollbar-track: #F5F7FA;
    --color-scrollbar-thumb: #D1D5DB;
    --color-header-bg: rgb(var(--color-surface-rgb) / 0.9);
    --color-nav-bg: rgb(var(--color-background-rgb) / 0.95);
    --color-modal-backdrop: rgb(15 23 42 / 0.55);
    --color-success-soft: #ECFDF5;
    --color-success-border: #A7F3D0;
    --color-danger-soft: #FEF2F2;
    --color-danger-border: #FECACA;
    --color-info-soft: #EFF6FF;
    --color-info-border: #BFDBFE;
    --color-warning: #EAB308;
    --color-pitch-a: #2d7a2d;
    --color-pitch-b: #339933;
    --color-pitch-border: #1a5c1a;
    --shadow-card: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow-card-hover: 0 10px 25px rgb(0 0 0 / 0.08), 0 4px 10px rgb(0 0 0 / 0.04);
    --shadow-modal: 0 24px 60px rgb(15 23 42 / 0.24);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --color-background-rgb: 10 15 25;
    --color-surface-rgb: 17 24 39;
    --color-surface-elevated-rgb: 24 32 48;
    --color-surface-highlight-rgb: 30 41 59;
    --color-primary-rgb: 96 165 250;
    --color-secondary-rgb: 248 113 113;
    --color-text-main-rgb: 226 232 240;
    --color-text-muted-rgb: 148 163 184;
    --color-text-dark-rgb: 5 10 18;
    --color-status-available-rgb: 52 211 153;
    --color-status-unavailable-rgb: 100 116 139;
    --color-team-a-rgb: 96 165 250;
    --color-team-b-rgb: 251 146 60;

    --color-primary-strong: #93C5FD;
    --color-primary-soft: rgb(var(--color-primary-rgb) / 0.14);
    --color-primary-border: rgb(var(--color-primary-rgb) / 0.36);
    --color-text-subtle: #64748B;
    --color-border: #263244;
    --color-border-strong: #334155;
    --color-border-soft: #1E293B;
    --color-card-muted: #111827;
    --color-card-muted-strong: #0F172A;
    --color-logo-gradient-start: #1E293B;
    --color-logo-gradient-end: #0F172A;
    --color-llm-avatar-bg: #F8FAFC;
    --color-llm-avatar-border: #FFFFFF;
    --color-scrollbar-track: #0F172A;
    --color-scrollbar-thumb: #475569;
    --color-header-bg: rgb(15 23 42 / 0.88);
    --color-nav-bg: rgb(10 15 25 / 0.94);
    --color-modal-backdrop: rgb(2 6 23 / 0.72);
    --color-success-soft: rgb(6 78 59 / 0.24);
    --color-success-border: rgb(52 211 153 / 0.28);
    --color-danger-soft: rgb(127 29 29 / 0.22);
    --color-danger-border: rgb(248 113 113 / 0.28);
    --color-info-soft: rgb(30 64 175 / 0.22);
    --color-info-border: rgb(96 165 250 / 0.28);
    --color-pitch-a: #1f6d35;
    --color-pitch-b: #23783a;
    --color-pitch-border: #144d28;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(148 163 184 / 0.03);
    --shadow-card-hover: 0 18px 34px rgb(0 0 0 / 0.34), 0 0 0 1px rgb(96 165 250 / 0.08);
    --shadow-modal: 0 28px 70px rgb(0 0 0 / 0.52);
}

html {
    background: var(--color-background);
}

body {
    background: var(--color-background);
    color: var(--color-text-main);
}

.site-header {
    background: var(--color-header-bg);
    border-color: var(--color-border);
}

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

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: rgb(var(--color-surface-rgb) / 0.84);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-card);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--color-text-main);
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
    transform: translateY(-1px);
    outline: none;
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.theme-toggle .theme-toggle-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-sun {
    display: block;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-moon {
    display: none;
}

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

.muted-surface-token {
    background: var(--color-card-muted);
    border-color: var(--color-border);
}

.tabs-scroll,
.model-strip,
.hero-scroll {
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

html[data-theme="dark"] .bg-primary.text-white,
html[data-theme="dark"] .bg-primary .text-white {
    color: rgb(var(--color-text-dark-rgb)) !important;
}

html[data-theme="dark"] .hover\:bg-blue-700:hover,
html[data-theme="dark"] .hover\:bg-blue-800:hover,
html[data-theme="dark"] .group:hover .group-hover\:bg-blue-800 {
    background-color: var(--color-primary-strong) !important;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}