:root {
    /* ===== FUTSAL ENERGY PALETTE ===== */
    --color-primary: #FF6B2B;
    --color-primary-dark: #E55A1F;
    --color-primary-light: rgba(255, 107, 43, 0.12);
    --color-primary-glow: #FF8F5E;

    --color-bg: #0F1923;
    --color-surface: #1A2733;
    --color-surface-alt: #213040;
    --color-border: #2A3A4A;
    --color-border-light: #1E2E3E;

    --color-text-primary: #F0F4F8;
    --color-text-secondary: #8B9DB5;
    --color-text-tertiary: #5A6E83;
    --color-text-inverse: #0F1923;

    --color-success: #00E5A0;
    --color-success-bg: rgba(0, 229, 160, 0.12);
    --color-success-text: #00E5A0;
    --color-warning: #FFB020;
    --color-warning-bg: rgba(255, 176, 32, 0.12);
    --color-error: #FF4757;
    --color-error-bg: rgba(255, 71, 87, 0.12);
    --color-info-bg: rgba(0, 229, 160, 0.08);
    --color-info-text: #00E5A0;

    --color-purple: #A855F7;
    --color-purple-bg: rgba(168, 85, 247, 0.12);

    --color-dark-header: #0A1118;
    --color-login-bg: #0F1923;
    --color-login-card: #1A2733;

    /* ===== TYPOGRAPHY ===== */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* ===== BORDER RADIUS ===== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ===== SHADOWS (dark theme) ===== */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.5);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 20px rgba(255, 107, 43, 0.25);

    /* ===== SPACING ===== */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;

    /* ===== Z-INDEX ===== */
    --z-header: 100;
    --z-modal-overlay: 200;
    --z-modal: 210;
    --z-toast: 300;
    --z-fab: 50;

    /* ===== LAYOUT ===== */
    --sidebar-width: 260px;
    --content-max-width: 1200px;
}

/* ===== BRIGHT THEME ===== */
[data-theme="bright"] {
    --color-bg: #F4F6F8;
    --color-surface: #FFFFFF;
    --color-surface-alt: #EDF0F4;
    --color-border: #D1D9E0;
    --color-border-light: #E8ECF0;

    --color-text-primary: #1A2733;
    --color-text-secondary: #5A6E83;
    --color-text-tertiary: #8B9DB5;
    --color-text-inverse: #F0F4F8;

    --color-dark-header: #FFFFFF;
    --color-login-bg: #F4F6F8;
    --color-login-card: #FFFFFF;

    --color-primary-light: rgba(255, 107, 43, 0.10);
    --color-success-bg: rgba(0, 229, 160, 0.10);
    --color-warning-bg: rgba(255, 176, 32, 0.10);
    --color-error-bg: rgba(255, 71, 87, 0.10);
    --color-info-bg: rgba(0, 229, 160, 0.06);
    --color-purple-bg: rgba(168, 85, 247, 0.10);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.10);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 20px rgba(255, 107, 43, 0.12);
}