/* ============================================================
   CSS Custom Properties — ALL color values live only here
   ============================================================ */

/* ── Dark Theme (default) ───────────────────────────────────── */
[data-theme="dark"],
:root {
  /* Accent */
  --accent:       #28AFB0;
  --accent-dark:  #1A535C;
  --accent-light: #3DD4D5;
  --accent-glow:  rgba(40,175,176,0.15);
  --accent-glow2: rgba(40,175,176,0.08);

  /* Backgrounds */
  --bg-page:    #0A0F1A;
  --bg-card:    #111827;
  --bg-card-hover: #1A2332;
  --bg-input:   #0D1420;
  --bg-sidebar: #0D1117;
  --bg-topbar:  #0D1117;
  --bg-modal:   rgba(0,0,0,0.75);
  --bg-overlay: rgba(10,15,26,0.95);

  /* Text */
  --text-primary:   #E5E7EB;
  --text-secondary: #9CA3AF;
  --text-muted:     #6B7280;
  --text-heading:   #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* Borders */
  --border:       #1F2E40;
  --border-light: rgba(31,46,64,0.5);
  --border-input: #2D3D54;
  --border-focus: #28AFB0;

  /* Status */
  --success:  #10B981;
  --warning:  #F6AE2D;
  --danger:   #EF4444;
  --purple:   #8B5CF6;
  --gold:     #F6AE2D;
  --info:     #3B82F6;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.5);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 30px rgba(40,175,176,0.1);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);

  /* Scroll bar */
  --scrollbar-track: #111827;
  --scrollbar-thumb: #1F2E40;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition: 0.25s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.4s ease;
}

/* ── Light Theme ────────────────────────────────────────────── */
[data-theme="light"] {
  --accent:       #1A9A9B;
  --accent-dark:  #157A7B;
  --accent-light: #28AFB0;
  --accent-glow:  rgba(40,175,176,0.10);
  --accent-glow2: rgba(40,175,176,0.05);

  --bg-page:       #F3F4F6;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F9FAFB;
  --bg-input:      #FFFFFF;
  --bg-sidebar:    #FFFFFF;
  --bg-topbar:     #FFFFFF;
  --bg-modal:      rgba(0,0,0,0.5);
  --bg-overlay:    rgba(243,244,246,0.97);

  --text-primary:   #1F2937;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --text-heading:   #111827;
  --text-on-accent: #FFFFFF;

  --border:       #E5E7EB;
  --border-light: rgba(209,213,219,0.5);
  --border-input: #D1D5DB;
  --border-focus: #1A9A9B;

  --success:  #059669;
  --warning:  #D97706;
  --danger:   #DC2626;
  --purple:   #7C3AED;
  --gold:     #D97706;
  --info:     #2563EB;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.08);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 30px rgba(40,175,176,0.08);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);

  --scrollbar-track: #F3F4F6;
  --scrollbar-thumb: #D1D5DB;
}