/* tokens.css - Centralized CSS Variables for Theming */
/* This file defines all color, shadow, and gradient tokens used across the application */

:root {
  /* ============================================
     BACKGROUNDS
     ============================================ */
  --bg-base: #0a0a0f;
  --bg-elevated: #0d0d14;
  --bg-surface-1: #1a1a1a;
  --bg-surface-2: #2a2a2a;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-overlay-heavy: rgba(0, 0, 0, 0.85);

  /* Game interface background */
  --bg-game-center: rgba(15, 20, 35, 1);
  --bg-game-edge: rgba(8, 10, 20, 1);

  /* Panel/container backgrounds */
  --bg-panel-start: rgba(15, 18, 30, 0.96);
  --bg-panel-end: rgba(10, 12, 22, 0.98);
  --bg-panel-solid: rgba(20, 25, 40, 0.98);

  /* Input/form backgrounds */
  --bg-input-start: rgba(30, 40, 60, 0.8);
  --bg-input-end: rgba(20, 30, 50, 0.9);
  --bg-input-focus-start: rgba(40, 50, 70, 0.9);
  --bg-input-focus-end: rgba(30, 40, 60, 0.95);

  /* Button backgrounds */
  --bg-button-start: rgba(80, 120, 200, 0.9);
  --bg-button-end: rgba(60, 100, 180, 0.9);
  --bg-button-hover-start: rgba(100, 140, 220, 0.95);
  --bg-button-hover-end: rgba(80, 120, 200, 0.95);
  --bg-button-secondary-start: rgba(50, 50, 60, 0.8);
  --bg-button-secondary-end: rgba(35, 35, 45, 0.8);

  /* Glass effect */
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(150, 180, 220, 0.7);
  --text-disabled: rgba(255, 255, 255, 0.3);
  --text-inverse: #1a1a2e;
  --text-white: #ffffff;

  /* Label text */
  --text-label: rgba(150, 180, 255, 0.7);
  --text-label-light: rgba(200, 210, 230, 0.85);

  /* ============================================
     ACCENT COLORS (Blue family - primary interactive)
     ============================================ */
  --accent-primary: #6366f1;
  --accent-primary-hover: #818cf8;

  /* Blue accent with opacity variants */
  --accent-blue: rgba(100, 150, 255, 1);
  --accent-blue-90: rgba(100, 150, 255, 0.9);
  --accent-blue-80: rgba(100, 150, 255, 0.8);
  --accent-blue-60: rgba(100, 150, 255, 0.6);
  --accent-blue-50: rgba(100, 150, 255, 0.5);
  --accent-blue-40: rgba(100, 150, 255, 0.4);
  --accent-blue-30: rgba(100, 150, 255, 0.3);
  --accent-blue-20: rgba(100, 150, 255, 0.2);
  --accent-blue-15: rgba(100, 150, 255, 0.15);
  --accent-blue-12: rgba(100, 150, 255, 0.12);
  --accent-blue-10: rgba(100, 150, 255, 0.1);
  --accent-blue-08: rgba(100, 150, 255, 0.08);
  --accent-blue-05: rgba(100, 150, 255, 0.05);

  /* Lighter blue variants */
  --accent-blue-light: rgba(100, 180, 255, 0.6);
  --accent-blue-bright: rgba(100, 200, 255, 0.5);
  --accent-cyan: rgba(100, 200, 255, 0.4);

  /* ============================================
     BORDER COLORS
     ============================================ */
  --border-default: rgba(100, 150, 255, 0.3);
  --border-subtle: rgba(100, 150, 255, 0.2);
  --border-faint: rgba(100, 150, 255, 0.1);
  --border-strong: rgba(100, 150, 255, 0.4);
  --border-focus: rgba(100, 180, 255, 0.6);
  --border-glow: rgba(120, 170, 255, 0.5);

  /* Glass borders */
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-glass-strong: rgba(255, 255, 255, 0.15);

  /* Separator lines */
  --border-separator: rgba(100, 150, 255, 0.15);

  /* ============================================
     STATUS COLORS
     ============================================ */
  /* Success - Green */
  --status-success: #4dff79;
  --status-success-dark: #22c55e;
  --status-success-bg: rgba(77, 255, 121, 0.2);
  --status-success-bg-subtle: rgba(77, 255, 121, 0.1);
  --status-success-border: rgba(77, 255, 121, 0.4);

  /* Error - Red */
  --status-error: #ff6b6b;
  --status-error-dark: #ef4444;
  --status-error-bg: rgba(255, 107, 107, 0.2);
  --status-error-bg-subtle: rgba(255, 107, 107, 0.1);
  --status-error-border: rgba(255, 100, 100, 0.4);

  /* Warning - Orange/Amber */
  --status-warning: #ffaa4d;
  --status-warning-dark: #f59e0b;
  --status-warning-bg: rgba(255, 170, 77, 0.2);
  --status-warning-border: rgba(255, 170, 77, 0.4);

  /* Info - Light Blue */
  --status-info: #4da6ff;
  --status-info-bg: rgba(77, 166, 255, 0.15);
  --status-info-border: rgba(77, 166, 255, 0.4);

  /* Special - Gold */
  --status-gold: #ffd700;
  --status-gold-dark: #b8860b;
  --status-gold-bg: rgba(255, 215, 0, 0.15);

  /* ============================================
     GAME BOARD - CELLS
     ============================================ */
  /* Hidden cell */
  --cell-hidden-start: rgba(60, 75, 110, 0.95);
  --cell-hidden-end: rgba(45, 60, 95, 0.95);
  --cell-hidden-border: rgba(100, 140, 200, 0.3);
  --cell-hidden-hover-start: rgba(75, 95, 140, 0.95);
  --cell-hidden-hover-end: rgba(60, 80, 125, 0.95);
  --cell-hidden-hover-border: rgba(120, 170, 255, 0.5);

  /* Revealed cell */
  --cell-revealed-start: rgba(25, 35, 55, 0.95);
  --cell-revealed-end: rgba(18, 28, 48, 0.95);
  --cell-revealed-border: rgba(60, 90, 140, 0.3);

  /* Mine cell */
  --cell-mine-start: rgba(180, 50, 50, 0.95);
  --cell-mine-end: rgba(140, 30, 30, 0.95);
  --cell-mine-border: rgba(255, 100, 100, 0.5);

  /* Flagged cell */
  --cell-flagged-start: rgba(80, 60, 100, 0.95);
  --cell-flagged-end: rgba(65, 45, 85, 0.95);
  --cell-flagged-border: rgba(180, 100, 255, 0.4);
  --cell-flag-color: #ff6b6b;

  /* Game board container */
  --board-bg-start: rgba(30, 40, 60, 0.9);
  --board-bg-end: rgba(20, 30, 50, 0.95);
  --board-border: rgba(100, 150, 255, 0.4);

  /* ============================================
     CELL NUMBER COLORS (Minesweeper 1-8)
     ============================================ */
  --cell-n1: #60b0ff;
  --cell-n2: #50e080;
  --cell-n3: #ff7070;
  --cell-n4: #c090ff;
  --cell-n5: #ffb050;
  --cell-n6: #50e0e0;
  --cell-n7: #ff80c0;
  --cell-n8: #a0b0c0;

  /* Glow intensity for numbers (0 = no glow, 0.5 = default) */
  --cell-number-glow: 0.5;

  /* ============================================
     AI DIFFICULTY COLORS
     ============================================ */
  --ai-beginner: #60ff90;
  --ai-beginner-bg: rgba(96, 255, 144, 0.15);
  --ai-intermediate: #ffb060;
  --ai-intermediate-bg: rgba(255, 176, 96, 0.15);
  --ai-expert: #ff6060;
  --ai-expert-bg: rgba(255, 96, 96, 0.15);

  /* ============================================
     PLAYER COLORS
     ============================================ */
  --player-human: #4dff79;
  --player-human-bg: rgba(77, 255, 121, 0.15);
  --player-ai: #4da6ff;
  --player-ai-bg: rgba(77, 166, 255, 0.15);
  --player-spectator: #a0a0a0;
  --player-disconnected: #888888;
  --player-eliminated: rgba(255, 100, 100, 0.6);

  /* Progress bar */
  --progress-bar-bg: rgba(100, 150, 255, 0.2);
  --progress-bar-fill: linear-gradient(90deg, #4da6ff, #60b0ff);
  --progress-bar-fill-win: linear-gradient(90deg, #4dff79, #60ff90);

  /* ============================================
     HUD ELEMENT BORDERS
     ============================================ */
  --hud-timer-border: rgba(100, 200, 255, 0.4);
  --hud-timer-glow: rgba(100, 200, 255, 0.2);
  --hud-flags-border: rgba(255, 180, 100, 0.4);
  --hud-flags-glow: rgba(255, 180, 100, 0.2);
  --hud-lives-border: rgba(255, 100, 100, 0.4);
  --hud-lives-glow: rgba(255, 100, 100, 0.2);
  --hud-attacks-border: rgba(255, 100, 100, 0.4);
  --hud-powerups-border: rgba(100, 255, 150, 0.4);
  --hud-powerups-glow: rgba(100, 255, 150, 0.2);

  /* ============================================
     POWER-UPS & ATTACKS
     ============================================ */
  --powerup-grenade: #ff6b35;
  --powerup-grenade-bg: rgba(255, 107, 53, 0.2);
  --powerup-life: #ff6b6b;
  --powerup-life-bg: rgba(255, 107, 107, 0.2);
  --powerup-turret: #4da6ff;
  --powerup-turret-bg: rgba(77, 166, 255, 0.2);

  --attack-slot-bg: rgba(40, 50, 70, 0.8);
  --attack-slot-border: rgba(100, 150, 255, 0.3);
  --attack-cooldown: rgba(255, 100, 100, 0.3);

  /* ============================================
     SHADOWS & GLOWS
     ============================================ */
  /* Box shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.5);

  /* Glow effects */
  --glow-blue-sm: 0 0 15px rgba(100, 150, 255, 0.2);
  --glow-blue-md: 0 0 30px rgba(100, 150, 255, 0.2);
  --glow-blue-lg: 0 0 60px rgba(100, 150, 255, 0.15);
  --glow-green: 0 0 20px rgba(100, 255, 150, 0.2);
  --glow-red: 0 0 20px rgba(255, 100, 100, 0.2);
  --glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);

  /* Text shadows */
  --text-glow-blue: 0 0 10px rgba(100, 200, 255, 0.5);
  --text-glow-title: 0 0 20px rgba(100, 180, 255, 0.5);
  --text-glow-success: 0 0 20px rgba(77, 255, 121, 0.5);
  --text-glow-error: 0 0 20px rgba(255, 107, 107, 0.5);

  /* Inset shadows */
  --inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --inset-dark: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  --inset-button: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.2);

  /* ============================================
     GRID PATTERNS
     ============================================ */
  --grid-line: rgba(120, 160, 255, 0.08);
  --grid-line-accent: rgba(120, 160, 255, 0.18);
  --grid-line-subtle: rgba(50, 80, 150, 0.03);

  /* ============================================
     SCROLLBAR
     ============================================ */
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(100, 150, 255, 0.3);
  --scrollbar-thumb-hover: rgba(100, 150, 255, 0.5);

  /* ============================================
     MODALS
     ============================================ */
  --modal-bg-start: rgba(25, 30, 45, 0.98);
  --modal-bg-end: rgba(15, 20, 35, 0.99);
  --modal-border: rgba(100, 150, 255, 0.4);
  --modal-header-line: rgba(100, 150, 255, 0.8);

  /* ============================================
     CONNECTION QUALITY
     ============================================ */
  --connection-excellent: #22c55e;
  --connection-good: #84cc16;
  --connection-fair: #eab308;
  --connection-poor: #f97316;
  --connection-bad: #ef4444;

  /* ============================================
     NOTIFICATIONS
     ============================================ */
  --notification-bg: rgba(20, 25, 40, 0.95);
  --notification-border: rgba(100, 150, 255, 0.3);
  --notification-success-border: rgba(77, 255, 121, 0.5);
  --notification-error-border: rgba(255, 107, 107, 0.5);
  --notification-warning-border: rgba(255, 170, 77, 0.5);
}