/* ─── LIGHT MODE (Default) ─────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg:              #f0f4ff;
  --color-surface:         #ffffff;
  --color-surface-muted:   #e8eef8;
  --color-surface-hover:   #dce6f7;

  /* Borders */
  --color-border:          #c8d5ec;
  --color-border-light:    #dce6f7;

  /* Brand – indigo/violet */
  --color-primary:         #4f46e5;
  --color-primary-light:   #6366f1;
  --color-primary-dark:    #3730a3;
  --color-primary-soft:    #eef2ff;
  --color-primary-glow:    rgba(79, 70, 229, 0.25);

  /* Accent – amber */
  --color-accent:          #d97706;
  --color-accent-light:    #f59e0b;
  --color-accent-soft:     #fffbeb;

  /* Teal highlight */
  --color-teal:            #0891b2;
  --color-teal-soft:       #ecfeff;

  /* Text */
  --color-text:            #0f172a;
  --color-text-secondary:  #334155;
  --color-text-muted:      #64748b;

  /* Status */
  --color-success:         #059669;
  --color-success-bg:      #ecfdf5;
  --color-error:           #dc2626;
  --color-error-bg:        #fef2f2;
  --color-info:            #2563eb;
  --color-info-bg:         #eff6ff;
  --color-warning:         #d97706;
  --color-warning-bg:      #fffbeb;

  /* Typography */
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Cairo', sans-serif;
  --font-latin:  'Source Serif 4', 'Georgia', serif;
  --font-mono:   'JetBrains Mono', 'Consolas', monospace;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(79, 70, 229, 0.08);
  --shadow-md:   0 4px 20px rgba(79, 70, 229, 0.12);
  --shadow-lg:   0 12px 48px rgba(79, 70, 229, 0.16);
  --shadow-glow: 0 0 32px rgba(79, 70, 229, 0.22);

  /* Layout */
  --header-height: 68px;
  --content-width: 960px;
  --wide-width:    1140px;

  /* Transitions */
  --transition:       0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Hero gradient */
  --hero-gradient: linear-gradient(135deg, #f0f4ff 0%, #ede9fe 50%, #fef3c7 100%);

  /* Scrollbar */
  --scrollbar-thumb:  #c7d2fe;
  --scrollbar-track:  var(--color-surface-muted);
}

/* ─── DARK MODE ────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg:              #0b0f1e;
  --color-surface:         #131929;
  --color-surface-muted:   #1a2135;
  --color-surface-hover:   #1f2847;

  /* Borders */
  --color-border:          #2a3658;
  --color-border-light:    #222d4a;

  /* Brand – indigo/violet (brighter in dark) */
  --color-primary:         #818cf8;
  --color-primary-light:   #a5b4fc;
  --color-primary-dark:    #6366f1;
  --color-primary-soft:    #1e1f3a;
  --color-primary-glow:    rgba(129, 140, 248, 0.3);

  /* Accent – amber */
  --color-accent:          #fbbf24;
  --color-accent-light:    #fcd34d;
  --color-accent-soft:     #1e1a0e;

  /* Teal */
  --color-teal:            #22d3ee;
  --color-teal-soft:       #0a1e26;

  /* Text */
  --color-text:            #e2e8f0;
  --color-text-secondary:  #94a3b8;
  --color-text-muted:      #64748b;

  /* Status */
  --color-success:         #34d399;
  --color-success-bg:      #052e1b;
  --color-error:           #f87171;
  --color-error-bg:        #2d0c0c;
  --color-info:            #60a5fa;
  --color-info-bg:         #0c1a2e;
  --color-warning:         #fbbf24;
  --color-warning-bg:      #1e1200;

  /* Shadows (more glow-y in dark) */
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 12px 56px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(129, 140, 248, 0.28);

  /* Hero gradient */
  --hero-gradient: linear-gradient(135deg, #0b0f1e 0%, #12162e 50%, #1a0e2e 100%);

  /* Scrollbar */
  --scrollbar-thumb:  #2e3d6a;
  --scrollbar-track:  #0f1528;
}