/* ─── Design Tokens ──────────────────────────────────────────────
   Light mode  →  [data-theme="light"]  (default)
   Dark mode   →  [data-theme="dark"]
   ─────────────────────────────────────────────────────────────── */

/* ── Shared palette (theme-independent) ────────────────────────── */
:root {
  /* Brand */
  --brand-gold:       #BA9D5B;
  --brand-gold-light: #D9BF8B;

  /* Blue */
  --c-blue-50:   #eff6ff;
  --c-blue-100:  #dbeafe;
  --c-blue-500:  #3b82f6;
  --c-blue-600:  #2563eb;
  --c-blue-700:  #1d4ed8;
  --c-blue-900:  #1e3a8a;

  /* Green */
  --c-green-50:  #f0fdf4;
  --c-green-100: #dcfce7;
  --c-green-500: #22c55e;
  --c-green-600: #16a34a;

  /* Purple */
  --c-purple-50:  #faf5ff;
  --c-purple-100: #ede9fe;
  --c-purple-500: #a855f7;
  --c-purple-600: #9333ea;

  /* Orange */
  --c-orange-50:  #fff7ed;
  --c-orange-100: #ffedd5;
  --c-orange-500: #f97316;
  --c-orange-600: #ea580c;

  /* Amber */
  --c-amber-50:  #fffbeb;
  --c-amber-100: #fef3c7;
  --c-amber-500: #f59e0b;
  --c-amber-600: #d97706;

  /* Pink */
  --c-pink-50:  #fdf2f8;
  --c-pink-100: #fce7f3;
  --c-pink-500: #ec4899;
  --c-pink-600: #db2777;

  /* Red */
  --c-red-50:  #fef2f2;
  --c-red-100: #fee2e2;
  --c-red-500: #ef4444;
  --c-red-600: #dc2626;
  --c-red-700: #b91c1c;

  /* Layout */
  --sidebar-width: 240px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px;

  /* Transitions */
  --t-fast:   0.1s ease;
  --t-normal: 0.18s ease;
  --t-theme:  0.22s ease;

  /* Typography */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;

  /* Dot nav colour (all contacts) */
  --dot-all: #9ca3af;
}

/* ── Light mode ─────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-app:        #eef0f5;
  --bg-sidebar:    #1a2035;
  --bg-card:       #ffffff;
  --bg-muted:      #f9fafb;
  --bg-input:      #f9fafb;
  --bg-row-hover:  #f9fafb;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
  --text-inverse:   #ffffff;
  --text-sidebar:   rgba(255,255,255,0.55);
  --text-sidebar-active: #ffffff;

  /* Borders */
  --border-default: #e5e7eb;
  --border-focus:   #2563eb;
  --border-card:    #f1f5f9;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.16);

  /* Badge text colours */
  --badge-blue-text:   #1d4ed8;
  --badge-green-text:  #15803d;
  --badge-purple-text: #7e22ce;
  --badge-orange-text: #c2410c;
  --badge-amber-text:  #92400e;
  --badge-pink-text:   #9d174d;

  /* Stat card accent */
  --stat-bg: #ffffff;

  /* Table head bg */
  --thead-bg: #f8fafc;

  /* Icon btn */
  --icon-btn-color: rgba(255,255,255,0.45);
  --icon-btn-hover: rgba(255,255,255,0.85);
}

/* ── Dark mode ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-app:        #0f1117;
  --bg-sidebar:    #0d1018;
  --bg-card:       #1a1d27;
  --bg-muted:      #22263a;
  --bg-input:      #22263a;
  --bg-row-hover:  #22263a;

  /* Text */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --text-inverse:   #ffffff;
  --text-sidebar:   rgba(255,255,255,0.4);
  --text-sidebar-active: #ffffff;

  /* Borders */
  --border-default: #2d3348;
  --border-focus:   #3b82f6;
  --border-card:    #2d3348;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.6);

  /* Badge colours (muted for dark bg) */
  --badge-blue-text:   #93c5fd;
  --badge-green-text:  #86efac;
  --badge-purple-text: #c4b5fd;
  --badge-orange-text: #fdba74;
  --badge-amber-text:  #fcd34d;
  --badge-pink-text:   #f9a8d4;

  /* Stat card accent */
  --stat-bg: #1a1d27;

  /* Table head bg */
  --thead-bg: #22263a;

  /* Icon btn */
  --icon-btn-color: rgba(255,255,255,0.35);
  --icon-btn-hover: rgba(255,255,255,0.75);

  /* Override badge backgrounds for dark */
  --c-blue-50:   rgba(59,130,246,0.15);
  --c-blue-100:  rgba(59,130,246,0.2);
  --c-green-50:  rgba(34,197,94,0.12);
  --c-green-100: rgba(34,197,94,0.2);
  --c-purple-50: rgba(168,85,247,0.12);
  --c-purple-100:rgba(168,85,247,0.2);
  --c-orange-50: rgba(249,115,22,0.12);
  --c-orange-100:rgba(249,115,22,0.2);
  --c-amber-50:  rgba(245,158,11,0.12);
  --c-amber-100: rgba(245,158,11,0.2);
  --c-pink-50:   rgba(236,72,153,0.12);
  --c-pink-100:  rgba(236,72,153,0.2);
  --c-red-50:    rgba(239,68,68,0.12);
  --c-red-100:   rgba(239,68,68,0.2);
}