/* ── CSS VARIABLES — Design System ── */
/* BUG-038 FIX: Added missing spacing tokens sp-7, sp-9, sp-11      */
/* BUG-039 FIX: Added --surface-1 and --surface-2 (used in admin.html) */
:root {
  /* Brand */
  --brand-primary:   #FF6B35;
  --brand-secondary: #533483;
  --brand-accent:    #F7C59F;
  /* BUG-261 NOTE: Brand orange fails WCAG AA on white (2.84:1).
     Use --brand-text for text contexts, --brand-primary for backgrounds only. */
  --brand-text:      #C4511F;  /* Darker orange — passes 4.5:1 on white */

  /* Blues */
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  /* Greens */
  --green-600: #16A34A;
  --green-100: #DCFCE7;
  --green-50:  #F0FDF4;

  /* Neutrals */
  --gray-950: #030712;
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;
  --white:    #FFFFFF;

  /* Semantic */
  --bg:           var(--white);
  --bg-secondary: var(--gray-50);
  --bg-card:      var(--white);
  --text:         var(--gray-900);
  --text-1:       var(--gray-900);   /* alias used in admin.html */
  --text-2:       var(--gray-600);
  --text-3:       var(--gray-400);
  --border:       var(--gray-200);
  --border-2:     var(--gray-300);

  /* BUG-039 FIX: --surface-1 and --surface-2 were used in admin.html but not defined */
  --surface-1:    var(--gray-50);
  --surface-2:    var(--white);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md: 0 8px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --shadow-lg: 0 16px 60px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 80px rgba(0,0,0,.15);

  /* Radius */
  --r-sm:  6px;
  --r:     10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 9999px;

  /* Spacing — BUG-038 FIX: Added sp-7, sp-9, sp-11 */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;   /* NEW */
  --sp-8:  32px;
  --sp-9:  36px;   /* NEW */
  --sp-10: 40px;
  --sp-11: 44px;   /* NEW — matches minimum touch target size */
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Typography */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-head: 'Poppins', var(--font);
  --fs-xs:   0.70rem;
  --fs-sm:   0.80rem;
  --fs-base: 0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;

  /* Transitions */
  --ease:    cubic-bezier(.4,0,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --t-fast:  0.15s;
  --t-base:  0.25s;
  --t-slow:  0.4s;

  /* Layout */
  --sidebar-w: 260px;
  --topnav-h:  62px;
}

/* ── Dark mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #0F0F1A;
  --bg-secondary: #161625;
  --bg-card:     #1A1A2E;
  --text:        #F1F5F9;
  --text-1:      #F1F5F9;
  --text-2:      #94A3B8;
  --text-3:      #64748B;
  --border:      rgba(255,255,255,.08);
  --border-2:    rgba(255,255,255,.12);
  --shadow:      0 4px 16px rgba(0,0,0,.4);
  --shadow-md:   0 8px 30px rgba(0,0,0,.5);
  /* BUG-039 FIX: surface tokens in dark mode */
  --surface-1:   #1E1E32;
  --surface-2:   #252540;
}