/* ============================================================
   GameCMS — Theme Variables (Dark / Light)
   CS2-Inspired Tactical Color Palette
   ============================================================ */

:root {
  /* ---- Transition ---- */
  --theme-transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;

  /* ---- Typography ---- */
  --font-heading: 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ---- Sizing ---- */
  --navbar-height: 70px;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.2);
  --shadow-xl: 0 16px 50px rgba(0,0,0,0.3);

  /* ---- Z-Index ---- */
  --z-dropdown: 100;
  --z-navbar: 1000;
  --z-modal: 1050;
  --z-toast: 1100;
}

/* ============================================================
   DARK THEME (default)
   ============================================================ */
[data-bs-theme="dark"] {
  /* ---- Backgrounds ---- */
  --bg-body: #0a0e17;
  --bg-body-rgb: 10, 14, 23;
  --bg-surface: #111827;
  --bg-surface-rgb: 17, 24, 39;
  --bg-surface-hover: #1a2332;
  --bg-surface-elevated: #1e293b;
  --bg-input: #0f172a;
  --bg-sidebar: #0d1220;
  --bg-navbar: rgba(10, 14, 23, 0.85);

  /* ---- Grid pattern overlay ---- */
  --bg-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E");

  /* ---- Primary (CS2 Amber/Gold) ---- */
  --primary: #f59e0b;
  --primary-rgb: 245, 158, 11;
  --primary-hover: #fbbf24;
  --primary-dark: #d97706;
  --primary-glow: 0 0 20px rgba(245, 158, 11, 0.3);
  --primary-glow-strong: 0 0 30px rgba(245, 158, 11, 0.5);

  /* ---- Secondary (CT Blue) ---- */
  --secondary: #3b82f6;
  --secondary-rgb: 59, 130, 246;
  --secondary-hover: #60a5fa;
  --secondary-dark: #2563eb;
  --secondary-glow: 0 0 20px rgba(59, 130, 246, 0.3);

  /* ---- Accent Colors ---- */
  --ct-blue: #3b82f6;
  --ct-blue-rgb: 59, 130, 246;
  --t-red: #ef4444;
  --t-red-rgb: 239, 68, 68;

  /* ---- Status ---- */
  --online: #22c55e;
  --online-rgb: 34, 197, 94;
  --online-glow: 0 0 12px rgba(34, 197, 94, 0.5);
  --offline: #ef4444;
  --offline-rgb: 239, 68, 68;
  --offline-glow: 0 0 12px rgba(239, 68, 68, 0.5);
  --warning: #f59e0b;
  --warning-rgb: 245, 158, 11;

  /* ---- Text ---- */
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --text-accent: #f59e0b;
  --text-link: #60a5fa;
  --text-link-hover: #93bbfd;

  /* ---- Borders ---- */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(245, 158, 11, 0.3);

  /* ---- Glass ---- */
  --glass-bg: rgba(17, 24, 39, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 12px;

  /* ---- Scrollbar ---- */
  --scrollbar-track: #111827;
  --scrollbar-thumb: #374151;
  --scrollbar-thumb-hover: #4b5563;

  /* ---- Progress bars ---- */
  --progress-bg: rgba(255, 255, 255, 0.08);
  --progress-fill: linear-gradient(90deg, #f59e0b, #fbbf24);

  /* ---- Badges ---- */
  --badge-success-bg: rgba(34, 197, 94, 0.15);
  --badge-success-text: #4ade80;
  --badge-danger-bg: rgba(239, 68, 68, 0.15);
  --badge-danger-text: #f87171;
  --badge-warning-bg: rgba(245, 158, 11, 0.15);
  --badge-warning-text: #fbbf24;
  --badge-info-bg: rgba(59, 130, 246, 0.15);
  --badge-info-text: #60a5fa;

  /* ---- Bootstrap overrides ---- */
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-color);
  --bs-card-bg: var(--bg-surface);
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-bs-theme="light"] {
  /* ---- Backgrounds ---- */
  --bg-body: #f0f2f5;
  --bg-body-rgb: 240, 242, 245;
  --bg-surface: #ffffff;
  --bg-surface-rgb: 255, 255, 255;
  --bg-surface-hover: #f8f9fa;
  --bg-surface-elevated: #ffffff;
  --bg-input: #f8f9fa;
  --bg-sidebar: #ffffff;
  --bg-navbar: rgba(255, 255, 255, 0.9);

  /* ---- Grid pattern overlay ---- */
  --bg-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E");

  /* ---- Primary (CS2 Amber/Gold) ---- */
  --primary: #d97706;
  --primary-rgb: 217, 119, 6;
  --primary-hover: #b45309;
  --primary-dark: #92400e;
  --primary-glow: 0 0 20px rgba(217, 119, 6, 0.2);
  --primary-glow-strong: 0 0 30px rgba(217, 119, 6, 0.35);

  /* ---- Secondary (CT Blue) ---- */
  --secondary: #2563eb;
  --secondary-rgb: 37, 99, 235;
  --secondary-hover: #1d4ed8;
  --secondary-dark: #1e40af;
  --secondary-glow: 0 0 20px rgba(37, 99, 235, 0.2);

  /* ---- Accent Colors ---- */
  --ct-blue: #2563eb;
  --ct-blue-rgb: 37, 99, 235;
  --t-red: #dc2626;
  --t-red-rgb: 220, 38, 38;

  /* ---- Status ---- */
  --online: #16a34a;
  --online-rgb: 22, 163, 74;
  --online-glow: 0 0 12px rgba(22, 163, 74, 0.3);
  --offline: #dc2626;
  --offline-rgb: 220, 38, 38;
  --offline-glow: 0 0 12px rgba(220, 38, 38, 0.3);
  --warning: #d97706;
  --warning-rgb: 217, 119, 6;

  /* ---- Text ---- */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --text-accent: #d97706;
  --text-link: #2563eb;
  --text-link-hover: #1d4ed8;

  /* ---- Borders ---- */
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-hover: rgba(0, 0, 0, 0.15);
  --border-accent: rgba(217, 119, 6, 0.3);

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-blur: 12px;

  /* ---- Scrollbar ---- */
  --scrollbar-track: #f0f2f5;
  --scrollbar-thumb: #d1d5db;
  --scrollbar-thumb-hover: #9ca3af;

  /* ---- Progress bars ---- */
  --progress-bg: rgba(0, 0, 0, 0.06);
  --progress-fill: linear-gradient(90deg, #d97706, #f59e0b);

  /* ---- Badges ---- */
  --badge-success-bg: rgba(22, 163, 74, 0.1);
  --badge-success-text: #15803d;
  --badge-danger-bg: rgba(220, 38, 38, 0.1);
  --badge-danger-text: #b91c1c;
  --badge-warning-bg: rgba(217, 119, 6, 0.1);
  --badge-warning-text: #92400e;
  --badge-info-bg: rgba(37, 99, 235, 0.1);
  --badge-info-text: #1d4ed8;

  /* ---- Bootstrap overrides ---- */
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-color);
  --bs-card-bg: var(--bg-surface);
}