/* =================================================
   THEME VARIABLES - CLUB SIMULATOR
   Dark Modern Theme - Triple-A Gaming Style
   ================================================= */

:root {
  /* ==================== PRIMARY COLORS ==================== */
  --primary: #10b981;
  --primary-dark: #059669;
  --primary-light: #34d399;
  --primary-glow: rgba(16, 185, 129, 0.3);

  --accent: #6366f1;
  --accent-dark: #4f46e5;
  --accent-light: #818cf8;

  --secondary: #3b82f6;
  --secondary-dark: #2563eb;
  --secondary-light: #60a5fa;

  /* ==================== STATUS COLORS ==================== */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.15);
  --success-text: #4ade80;
  --success-border: rgba(34, 197, 94, 0.4);

  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --warning-text: #fbbf24;
  --warning-border: rgba(245, 158, 11, 0.4);

  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-text: #f87171;
  --danger-border: rgba(239, 68, 68, 0.4);

  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.15);
  --info-text: #60a5fa;
  --info-border: rgba(59, 130, 246, 0.4);

  /* ==================== BACKGROUND COLORS ==================== */
  --bg-dark: #0f172a;
  --bg-darker: #020617;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;
  --bg-card-alt: #0f172a;
  --bg-input: #1e293b;
  --bg-input-focus: #334155;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-table-header: #1e293b;
  --bg-table-row-alt: rgba(255, 255, 255, 0.02);
  --bg-modal-overlay: rgba(0, 0, 0, 0.7);

  /* Gradients */
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #1e293b;
  --bg-gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  --bg-gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  --bg-gradient-card: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%);

  /* ==================== TEXT COLORS ==================== */
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;
  --text-light: #ffffff;
  --text-dark: #0f172a;
  --text-link: #60a5fa;
  --text-link-hover: #93c5fd;

  /* ==================== BORDER COLORS ==================== */
  --border-color: #334155;
  --border-light: #475569;
  --border-medium: #64748b;
  --border-dark: #1e293b;
  --border-input: #334155;
  --border-focus: var(--primary);
  --border-error: var(--danger);

  /* ==================== COMPETITION TYPES ==================== */
  --type-league: #3b82f6;
  --type-league-bg: rgba(59, 130, 246, 0.15);
  --type-league-border: rgba(59, 130, 246, 0.4);

  --type-cup: #ef4444;
  --type-cup-bg: rgba(239, 68, 68, 0.15);
  --type-cup-border: rgba(239, 68, 68, 0.4);

  --type-mixed: #a855f7;
  --type-mixed-bg: rgba(168, 85, 247, 0.15);
  --type-mixed-border: rgba(168, 85, 247, 0.4);

  /* ==================== MONEY COLORS ==================== */
  --money-positive: #22c55e;
  --money-negative: #ef4444;
  --money-neutral: #94a3b8;

  /* ==================== ADDITIONAL UI COLORS ==================== */
  --bg-elevated: #0f172a;
  --disabled-bg: #475569;
  --disabled-text: #94a3b8;
  --gold: #fbbf24;
  --link: #60a5fa;
  --accent-text: #c084fc;
  --warning-dark: #ea580c;
  --info-dark: #2563eb;

  /* ==================== SHADOWS ==================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--primary-glow);
  --shadow-glow-accent: 0 0 20px rgba(99, 102, 241, 0.3);

  /* Legacy shadow support */
  --shadow-light: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  --shadow-dark: var(--shadow-lg);

  /* ==================== LEGACY ALIASES ==================== */
  /* Many pages use shorthand variable names. These aliases map
     them to the correct theme variables so all pages render
     consistently with the dark theme. */
  --card-bg: var(--bg-card);
  --border: var(--border-color);
  --text: var(--text-primary);
  --shadow: var(--shadow-md);
  --hover-bg: var(--bg-hover);

  /* --color-* aliases (used by LiveMatch and scoped component CSS) */
  --color-primary: var(--primary);
  --color-primary-rgb: 16, 185, 129;
  --color-secondary: var(--secondary);
  --color-surface: var(--bg-card);
  --color-surface-alt: var(--bg-dark);
  --color-border: var(--border-color);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-error: var(--danger);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-warning-rgb: 245, 158, 11;

  /* ==================== BUTTONS ==================== */
  --btn-primary-bg: var(--primary);
  --btn-primary-hover: var(--primary-dark);
  --btn-primary-text: white;

  --btn-secondary-bg: var(--bg-card);
  --btn-secondary-hover: var(--bg-card-hover);
  --btn-secondary-text: var(--text-secondary);
  --btn-secondary-border: var(--border-color);

  --btn-danger-bg: var(--danger);
  --btn-danger-hover: #dc2626;
  --btn-danger-text: white;

  --btn-accent-bg: var(--accent);
  --btn-accent-hover: var(--accent-dark);
  --btn-accent-text: white;

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

  /* ==================== TRANSITIONS ==================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ==================== Z-INDEX ==================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-tooltip: 1100;
  --z-toast: 1200;
}

/* ==================== SCROLLBAR STYLING ==================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) var(--bg-dark);
}

/* ==================== SELECTION ==================== */
::selection {
  background: var(--primary);
  color: white;
}