:root {
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;
    
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --gray-950: #0a0a0a;
    
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-500-rgb: 239, 68, 68;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;

    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-800: #166534;
    
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-800: #92400e;
    
    --cyan-500: #00CED1;
    --purple-500: #9370DB;
    --magenta-500: #FF1493;

    --yellow: #FFFF00;
    --red: #FF0000;
    --green: #00FF00;
    --blue: #0000FF;
    --orange: #FFA500;
    --purple: #800080;
    --cyan: #00FFFF;

    --court-green: #00C851;
    --court-clay: #C04000;
    --court-blue: #5BA8D4;

    --court-greenset: #1E5AA8;
    --court-greenset-indoor: #0A3161;
    --court-laykold: #1F255F;
    --court-laykold-us: #0A3161;
    --court-decoturf: #1E5AA8;
    --court-decoturf-sha: #3A2D6B;

    --surface: var(--white);
    --surface-alt: var(--gray-50);
    --surface-hover: var(--gray-100);
    --surface-elevated: var(--white);
    --text-primary: var(--gray-950);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-400);
    --border-color: var(--gray-200);
    --border-color-strong: var(--gray-300);
    --heatmap-gradient: linear-gradient(to right, var(--green-500), #E6E600, var(--red-500));
}

body:not([class*="theme-"]),
.theme-aiwatch {
    --primary: var(--purple-500);
    --primary-rgb: 147, 112, 219;
    --gradient-primary: linear-gradient(315deg, var(--cyan-500) 0%, var(--purple-500) 50%, var(--magenta-500) 100%);
    --primary-shadow: rgba(147, 112, 219, 0.35);
}

.theme-aicare {
    --primary: var(--cyan-500);
    --primary-rgb: 0, 206, 209;
    --gradient-primary: linear-gradient(135deg, var(--cyan-500) 0%, var(--purple-500) 100%);
    --primary-shadow: rgba(0, 206, 209, 0.35);
}

.theme-aicoach {
    --primary: var(--magenta-500);
    --primary-rgb: 255, 20, 147;
    --gradient-primary: linear-gradient(135deg, var(--purple-500) 0%, var(--magenta-500) 100%);
    --primary-shadow: rgba(255, 20, 147, 0.35);
}

:root.dark,
body.dark {
    --surface: var(--gray-900);
    --surface-alt: var(--gray-950);
    --surface-hover: var(--gray-800);
    --surface-elevated: var(--gray-700);
    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-400);
    --text-muted: var(--gray-500);
    --border-color: var(--gray-700);
    --border-color-strong: var(--gray-600);
    --glass-bg: rgba(23, 23, 23, 0.95);
    --glass-border: 1px solid rgba(var(--white-rgb), var(--opacity-5));
    --shadow-opacity: 0.3;
    --shadow-opacity-sm: 0.15;
    --shadow-opacity-heavy: 0.5;
}