/**
 * CSS Custom Properties (Variables)
 * Define all color themes, spacing, and design tokens here
 */

:root {
  /* Dark Theme Colors (Default) */
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f25;
  --bg-tertiary: #252b33;
  --bg-hover: #2d3540;
  --card-bg: var(--bg-secondary);

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #b3bac5;
  --text-muted: #8b949e;
  --text-color: var(--text-primary);

  /* Accent Colors */
  --accent-primary: #00d9ff;
  --accent-secondary: #1db954;
  --accent-warning: #ff9500;
  --accent-danger: #ff4757;
  --accent-success: #2ed573;
  --primary: var(--accent-primary);
  --primary-light: rgba(0, 217, 255, 0.2);
  --primary-dark: #00b8d9;

  /* Border Colors */
  --border-color: #30363d;
  --border-light: #21262d;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.25);

  /* Gradients */
  --gradient-primary: linear-gradient(
    90deg,
    #ff3b30 0%,
    #ff9500 16%,
    #ffcc00 32%,
    #34c759 48%,
    #5ac8fa 64%,
    #5856d6 80%,
    #af52de 100%
  );
  --gradient-card: linear-gradient(145deg, var(--bg-secondary), var(--bg-tertiary));

  /* Layout Dimensions */
  --sidebar-width: 280px;
  --navbar-height: 70px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --border-radius: 8px;
  --border-radius-lg: 12px;
}

/* Light Theme */
:root.light-mode {
  /* Light Theme Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-hover: #dee2e6;
  --card-bg: var(--bg-secondary);

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6c757d;
  --text-color: var(--text-primary);

  /* Accent Colors (slightly adjusted for better light mode contrast) */
  --accent-primary: #0099cc;
  --accent-secondary: #198754;
  --accent-warning: #ff9500;
  --accent-danger: #dc3545;
  --accent-success: #28a745;
  --primary: var(--accent-primary);
  --primary-light: rgba(0, 153, 204, 0.1);
  --primary-dark: #007399;

  /* Border Colors */
  --border-color: #dee2e6;
  --border-light: #e9ecef;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Gradients */
  --gradient-primary: linear-gradient(
    90deg,
    #ff3b30 0%,
    #ff9500 16%,
    #ffcc00 32%,
    #34c759 48%,
    #5ac8fa 64%,
    #5856d6 80%,
    #af52de 100%
  );
  --gradient-card: linear-gradient(145deg, var(--bg-secondary), var(--bg-tertiary));
}