/* ============================================
   COLOR THEME SYSTEM
   User can select from standard schemes or use team colors
   ============================================ */

/* ============================================
   BASE SYSTEM COLORS (Consistent across all themes)
   ============================================ */

:root {
    /* Light Mode - System colors (same for all themes) */
    --system-gray4: #DADCE0;
    --system-gray5: #ECEDF0;
    --system-gray6: #F4F5F6;
    --system-background: #F7F8FA;
    --system-background2: #F0F1F3;

    --text-primary: #111827;
    --text-secondary: #6B7280;
    --border-color: #DADCE0;
    --input-background: #F7F8FA;

    /* Enhanced shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* State colors (consistent across themes) */
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --error-color: #EF4444;
    --info-color: #3B82F6;

    /* Surface variables for cards and modals */
    --surface-primary: #F7F8FA;
    --surface-secondary: #ECEDF0;

    /* Utility variables */
    --transition-colors: color 0.2s, background-color 0.2s, border-color 0.2s;
}

[data-theme="dark"] {
    /* Dark Mode - System colors (same for all themes) */
    --system-gray4: #1F2937;
    --system-gray5: #374151;
    --system-gray6: #1F2937;
    --system-background: #0F172A;
    --system-background2: #0C1425;

    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;
    --border-color: #374151;
    --input-background: #1E293B;

    /* Surface variables for cards and modals */
    --surface-primary: #1E293B;
    --surface-secondary: #374151;

    /* State colors in dark mode */
    --success-color: #34D399;
    --warning-color: #FBBF24;
    --error-color: #F87171;
    --info-color: #60A5FA;
}

/* ============================================
   SCHEME 1: DEEP BLUE & AMBER (Default)
   ============================================ */

:root,
:root[data-color-scheme="blue"] {
    --primary-color: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: #60A5FA;
    --primary-dark: #1E40AF;
    --accent-color: #F59E0B;
    --accent-hover: #D97706;

    /* Backwards compatibility */
    --primary-green: #2563EB;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    --gradient-subtle: linear-gradient(180deg, var(--system-background) 0%, var(--system-background2) 100%);
}

[data-theme="dark"][data-color-scheme="blue"],
[data-theme="dark"]:not([data-color-scheme]) {
    --primary-color: #3B82F6;
    --primary-hover: #60A5FA;
    --primary-light: #93C5FD;
    --primary-dark: #2563EB;
    --accent-color: #FBBF24;
    --accent-hover: #F59E0B;

    /* Backwards compatibility */
    --primary-green: #3B82F6;

    --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
}

/* ============================================
   SCHEME 2: PURPLE & TEAL
   ============================================ */

:root[data-color-scheme="purple"] {
    --primary-color: #7C3AED;
    --primary-hover: #6D28D9;
    --primary-light: #A78BFA;
    --primary-dark: #5B21B6;
    --accent-color: #14B8A6;
    --accent-hover: #0D9488;

    /* Backwards compatibility */
    --primary-green: #7C3AED;

    --gradient-primary: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

[data-theme="dark"][data-color-scheme="purple"] {
    --primary-color: #8B5CF6;
    --primary-hover: #A78BFA;
    --primary-light: #C4B5FD;
    --primary-dark: #7C3AED;
    --accent-color: #2DD4BF;
    --accent-hover: #14B8A6;

    /* Backwards compatibility */
    --primary-green: #8B5CF6;

    --gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
}

/* ============================================
   SCHEME 3: REFINED GREEN & GOLD
   ============================================ */

:root[data-color-scheme="green"] {
    --primary-color: #059669;
    --primary-hover: #047857;
    --primary-light: #34D399;
    --primary-dark: #065F46;
    --accent-color: #D97706;
    --accent-hover: #B45309;

    /* Backwards compatibility */
    --primary-green: #059669;

    --gradient-primary: linear-gradient(135deg, #059669 0%, #047857 100%);
}

[data-theme="dark"][data-color-scheme="green"] {
    --primary-color: #10B981;
    --primary-hover: #34D399;
    --primary-light: #6EE7B7;
    --primary-dark: #059669;
    --accent-color: #F59E0B;
    --accent-hover: #D97706;

    /* Backwards compatibility */
    --primary-green: #10B981;

    --gradient-primary: linear-gradient(135deg, #10B981 0%, #34D399 100%);
}

/* ============================================
   SCHEME 4: WARM GREEN (Softer, warmer palette)
   ============================================ */

:root[data-color-scheme="warm"] {
    /* Warm palette with softer grays */
    --system-gray4: #C8C8C5;
    --system-gray5: #D9D9D6;
    --system-gray6: #F2F2EF;
    --system-background: #F7F7F4;
    --system-background2: #EFEFEC;
    --text-primary: #1A1A1A;
    --text-secondary: #6B6B68;
    --border-color: #D4D4D1;
    --input-background: #F7F7F4;

    /* Primary color - vibrant green */
    --primary-color: #00B04C;
    --primary-hover: #009940;
    --primary-light: #00C957;
    --primary-dark: #008838;
    --accent-color: #00B04C;
    --accent-hover: #009940;

    /* Backwards compatibility */
    --primary-green: #00B04C;

    /* Enhanced shadows for softer look */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    --gradient-primary: linear-gradient(135deg, #00B04C 0%, #009940 100%);
}

[data-theme="dark"][data-color-scheme="warm"] {
    /* Warm dark mode */
    --system-gray4: #26262A;
    --system-gray5: #38383A;
    --system-gray6: #2C2C2E;
    --system-background: #1C1C1E;
    --system-background2: #141414;
    --text-primary: #E5E5E7;
    --text-secondary: #AEAEB2;
    --border-color: #38383A;
    --input-background: #1C1C1E;

    /* Primary color - same vibrant green */
    --primary-color: #00B04C;
    --primary-hover: #00C957;
    --primary-light: #00D965;
    --primary-dark: #009940;
    --accent-color: #00B04C;
    --accent-hover: #00C957;

    /* Backwards compatibility */
    --primary-green: #00B04C;

    --gradient-primary: linear-gradient(135deg, #00B04C 0%, #00C957 100%);
}

/* ============================================
   TEAM COLORS (Custom - set via inline styles)
   Team colors override only primary/accent colors
   System grays and backgrounds remain standard
   ============================================ */

:root[data-color-scheme="team"] {
    /* These will be set via inline style attribute */
    /* Example: style="--primary-color: #FF6B00; --accent-color: #00C2FF;" */

    /* Fallback to blue if team colors not set */
    --primary-color: var(--team-primary-color, #2563EB);
    --primary-hover: var(--team-primary-hover, #1D4ED8);
    --accent-color: var(--team-accent-color, #F59E0B);

    /* Backwards compatibility */
    --primary-green: var(--primary-color);
}

[data-theme="dark"][data-color-scheme="team"] {
    --primary-color: var(--team-primary-color, #3B82F6);
    --primary-hover: var(--team-primary-hover, #60A5FA);
    --accent-color: var(--team-accent-color, #FBBF24);

    /* Backwards compatibility */
    --primary-green: var(--primary-color);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

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

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

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

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

.hover-primary:hover {
    background-color: var(--primary-hover);
    transition: var(--transition-colors);
}

.gradient-primary {
    background: var(--gradient-primary);
}