/* =====================================================
   THEME CONFIGURATION - Change colors here to update entire UI
   ===================================================== */

:root {
  /* ====== PRIMARY COLORS ====== */
  --theme-bg-primary: #0f0f14;        /* Main background */
  --theme-bg-secondary: #1c1c26;       /* Card backgrounds */
  --theme-bg-tertiary: #252532;        /* Hover states, inputs */
  --theme-bg-hover: #2a2a3a;           /* Hover background */
  
  /* ====== TEXT COLORS ====== */
  --theme-text-primary: #ffffff;       /* Main text */
  --theme-text-secondary: #a1a1aa;     /* Secondary text */
  --theme-text-muted: #71717a;         /* Muted text */
  --theme-text-dark: #0f0f14;          /* Dark text (on light backgrounds) */
  
  /* ====== ACCENT COLORS ====== */
  --theme-accent: #fbbf24;             /* Primary accent (gold) */
  --theme-accent-hover: #f59e0b;       /* Accent hover */
  --theme-accent-light: rgba(251, 191, 36, 0.2);
  
  /* ====== BRAND COLORS ====== */
  --theme-brand-red: #c10930;          /* Primary brand red */
  --theme-brand-red-dark: #8b0620;     /* Darker brand red */
  --theme-brand-blue: #3b5998;         /* Brand blue */
  
  /* ====== BACK/LAY COLORS ====== */
  --theme-back: #72bbef;               /* Back bet color */
  --theme-back-dark: #5a9fd4;          /* Back bet darker */
  --theme-back-light: rgba(114, 187, 239, 0.2);
  --theme-lay: #f994ba;                /* Lay bet color */
  --theme-lay-dark: #e87da6;           /* Lay bet darker */
  --theme-lay-light: rgba(249, 148, 186, 0.2);
  
  /* ====== STATUS COLORS ====== */
  --theme-success: #22c55e;            /* Success/Win */
  --theme-success-dark: #16a34a;
  --theme-error: #ef4444;              /* Error/Loss */
  --theme-error-dark: #dc2626;
  --theme-warning: #fbbf24;            /* Warning */
  --theme-info: #3b82f6;               /* Info */
  --theme-suspended: rgba(193, 9, 48, 0.9); /* Suspended overlay */
  
  /* ====== BORDER COLORS ====== */
  --theme-border: rgba(255, 255, 255, 0.06);
  --theme-border-light: rgba(255, 255, 255, 0.1);
  --theme-border-hover: rgba(251, 191, 36, 0.3);
  
  /* ====== SHADOWS ====== */
  --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --theme-shadow-gold: 0 4px 16px rgba(251, 191, 36, 0.2);
  
  /* ====== TYPOGRAPHY ====== */
  --theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* ====== SIZING ====== */
  --theme-radius-sm: 6px;
  --theme-radius-md: 10px;
  --theme-radius-lg: 14px;
  --theme-radius-xl: 20px;
  
  /* ====== TRANSITIONS ====== */
  --theme-transition-fast: 150ms ease;
  --theme-transition-normal: 200ms ease;
  --theme-transition-slow: 300ms ease;
}

/* =====================================================
   ALTERNATIVE THEME: ROYAL BLUE
   Uncomment below to switch to royal blue theme
   ===================================================== */
/*
:root {
  --theme-bg-primary: #0a1628;
  --theme-bg-secondary: #132238;
  --theme-bg-tertiary: #1c3252;
  --theme-accent: #60a5fa;
  --theme-accent-hover: #3b82f6;
  --theme-brand-red: #2563eb;
  --theme-brand-red-dark: #1d4ed8;
}
*/

/* =====================================================
   ALTERNATIVE THEME: EMERALD
   Uncomment below to switch to emerald green theme
   ===================================================== */
/*
:root {
  --theme-bg-primary: #0c1410;
  --theme-bg-secondary: #162820;
  --theme-bg-tertiary: #1f3d2d;
  --theme-accent: #34d399;
  --theme-accent-hover: #10b981;
  --theme-brand-red: #059669;
  --theme-brand-red-dark: #047857;
}
*/

/* =====================================================
   ALTERNATIVE THEME: PURPLE NIGHT
   Uncomment below to switch to purple theme
   ===================================================== */
/*
:root {
  --theme-bg-primary: #13111c;
  --theme-bg-secondary: #1e1a2d;
  --theme-bg-tertiary: #2d2640;
  --theme-accent: #a78bfa;
  --theme-accent-hover: #8b5cf6;
  --theme-brand-red: #7c3aed;
  --theme-brand-red-dark: #5b21b6;
}
*/

/* =====================================================
   GLOBAL RESETS WITH THEME VARIABLES
   ===================================================== */
body {
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  font-family: var(--theme-font-primary);
}

/* Apply theme to common elements */
a { color: var(--theme-accent); }
a:hover { color: var(--theme-accent-hover); }

.text-success, .green { color: var(--theme-success) !important; }
.text-danger, .red { color: var(--theme-error) !important; }
.text-warning { color: var(--theme-warning) !important; }
.text-info { color: var(--theme-info) !important; }
.text-muted { color: var(--theme-text-muted) !important; }

/* Cards */
.card {
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
}

.card-header {
  background: var(--theme-bg-tertiary);
  border-bottom: 1px solid var(--theme-border);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--theme-brand-red) 0%, var(--theme-brand-red-dark) 100%);
  border: none;
}

.btn-success {
  background: linear-gradient(135deg, var(--theme-success) 0%, var(--theme-success-dark) 100%);
  border: none;
}

.btn-danger {
  background: linear-gradient(135deg, var(--theme-error) 0%, var(--theme-error-dark) 100%);
  border: none;
}

/* Forms */
input, select, textarea {
  background: var(--theme-bg-tertiary);
  border: 1px solid var(--theme-border-light);
  color: var(--theme-text-primary);
  border-radius: var(--theme-radius-sm);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--theme-accent);
  outline: none;
}

/* Tables */
table {
  background: var(--theme-bg-secondary);
}

th {
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-muted);
}

td {
  border-color: var(--theme-border);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--theme-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--theme-bg-tertiary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-muted);
}