:root {
    /* --- NEW "COURT & VOLT" SYSTEM --- */
    --primary-color: #2563EB;       /* Royal Blue */
    --primary-hover: #1D4ED8;
    --accent-color: #84CC16;        /* Electric Lime */
    --accent-hover: #65A30D;
    --color-volt: var(--accent-color);

    --success-color: #10B981;
    --danger-color: #EF4444;
    --warning-color: #F59E0B;

    --bg-primary: #F3F4F6;            /* Page background */
    --bg-secondary: #FFFFFF;          /* Cards, Navbar, Dropdowns */
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --border-color: #E5E7EB;
    --text-on-primary: #FFFFFF;
    --text-on-accent: #111827;      /* For Volt/Warning colors */

    /* Semantic Tokens Bridge */
    --bg-color: var(--bg-primary);
    --card-bg: var(--bg-secondary);

    /* --- BACKWARD COMPATIBILITY BRIDGE (Do Not Remove Yet) --- */
    /* This maps old variable names to the new system so the UI doesn't break */
    --primary-brand: var(--primary-color);
    --primary-brand-dark: var(--primary-hover);
    --surface-color: var(--bg-secondary);
    --background-color: var(--bg-primary);
    --text-color: var(--text-primary);
    --text-secondary-color: var(--text-secondary);
    --accent-highlight: var(--accent-color);

    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-score: 'Oswald', sans-serif;

    /* Structure */
    --box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --border-radius: 8px;

    /* Surface System */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 50rem;

    --shadow-sm: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
}