/* ========================================================================
   LocalQ Design Tokens
   Source of truth — slate + emerald palette, light & dark
   ======================================================================== */

:root {
  /* Typography */
  --lq-font-ui: 'Geist', -apple-system, system-ui, sans-serif;
  --lq-font-display: 'Instrument Serif', 'Geist', serif;
  --lq-font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  /* Type scale */
  --lq-text-xs: 11px;
  --lq-text-sm: 13px;
  --lq-text-md: 15px;
  --lq-text-lg: 17px;
  --lq-text-xl: 20px;
  --lq-text-2xl: 24px;
  --lq-text-3xl: 32px;
  --lq-text-4xl: 44px;
  --lq-text-5xl: 56px;

  /* Spacing — 4px base */
  --lq-space-0: 0;
  --lq-space-1: 4px;
  --lq-space-2: 8px;
  --lq-space-3: 12px;
  --lq-space-4: 16px;
  --lq-space-5: 20px;
  --lq-space-6: 24px;
  --lq-space-7: 32px;
  --lq-space-8: 40px;
  --lq-space-9: 48px;
  --lq-space-10: 64px;

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

  /* Shadows */
  --lq-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --lq-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --lq-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --lq-shadow-lg: 0 16px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --lq-shadow-emerald: 0 4px 14px rgba(16, 185, 129, 0.28);
}

/* ─────────────────────────────────────────────
   LIGHT MODE
   ───────────────────────────────────────────── */
:root, [data-theme="light"] {
  /* Surfaces */
  --lq-bg-canvas:     #F8FAFC;   /* app background */
  --lq-bg-surface:    #FFFFFF;   /* card */
  --lq-bg-elevated:   #F1F5F9;   /* nested */
  --lq-bg-sunken:     #E2E8F0;   /* deepest */
  --lq-bg-emerald-soft: #ECFDF5;
  --lq-bg-emerald-mid:  #D1FAE5;

  /* Text */
  --lq-text-primary:   #0F172A;
  --lq-text-secondary: #475569;
  --lq-text-tertiary:  #64748B;   /* WCAG fix: was #94A3B8 (slate-400 → 500) */
  --lq-text-inverse:   #F8FAFC;
  --lq-text-emerald:   #064E3B;

  /* Brand */
  --lq-emerald:        #10B981;
  --lq-emerald-on:     #022C22;   /* text/icon laid over --lq-emerald (inversion pattern) */
  --lq-emerald-light:  #34D399;
  --lq-emerald-dark:   #047857;
  --lq-emerald-deep:   #064E3B;
  --lq-emerald-ink:    #022C22;

  /* CTA — Option B: deep green bg + white text (Vercel/Linear/Stripe pattern) */
  --lq-cta-bg:         #047857;   /* same as emerald-dark in light */
  --lq-cta-on:         #FFFFFF;
  --lq-cta-shadow:     0 4px 14px rgba(4, 120, 87, 0.32);

  /* Borders */
  --lq-border-subtle:  rgba(15, 23, 42, 0.05);
  --lq-border-default: rgba(15, 23, 42, 0.08);
  --lq-border-strong:  rgba(15, 23, 42, 0.16);
  --lq-border-emerald: rgba(16, 185, 129, 0.22);

  /* Status — wait times (WCAG-tuned: deeper hues) */
  --lq-status-low:       #047857;   /* was #10B981 — text version of emerald */
  --lq-status-low-bg:    #ECFDF5;
  --lq-status-low-ink:   #064E3B;
  --lq-status-medium:    #B45309;   /* was #F59E0B — amber-500 → amber-700 */
  --lq-status-medium-bg: #FEF3C7;   /* was #FFFBEB — amber-100 for better contrast */
  --lq-status-medium-ink:#7C2D12;
  --lq-status-high:      #DC2626;   /* was #EF4444 — red-500 → red-600 */
  --lq-status-high-bg:   #FEF2F2;
  --lq-status-high-ink:  #7F1D1D;
  --lq-status-critical:  #B91C1C;
  --lq-status-closed:    #64748B;
  --lq-status-unknown:   #94A3B8;

  /* Categorical (places + neighborhoods) */
  --lq-cat-municipal:    #0F766E;
  --lq-cat-saaq:         #2563EB;
  --lq-cat-clinic:       #10B981;
  --lq-cat-hospital:     #DC2626;
  --lq-cat-pharmacy:     #8B5CF6;
  --lq-cat-canada:       #0EA5E9;

  /* Map overlay */
  --lq-map-ground: #EEF2E7;
  --lq-map-road:   #FFFFFF;
  --lq-map-water:  #BCE0EE;
  --lq-map-park:   #C8E6B6;
}

/* ─────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────── */
[data-theme="dark"] {
  --lq-bg-canvas:     #0B1220;
  --lq-bg-surface:    #15203A;
  --lq-bg-elevated:   #1E2C4A;
  --lq-bg-sunken:     #0F172A;
  --lq-bg-emerald-soft: rgba(16, 185, 129, 0.10);
  --lq-bg-emerald-mid:  rgba(16, 185, 129, 0.18);

  --lq-text-primary:   #F1F5F9;
  --lq-text-secondary: #94A3B8;
  --lq-text-tertiary:  #64748B;
  --lq-text-inverse:   #0F172A;
  --lq-text-emerald:   #6EE7B7;

  --lq-emerald:        #34D399;
  --lq-emerald-on:     #022C22;   /* same pattern in dark — emerald is bright enough that dark text reads */
  --lq-emerald-light:  #6EE7B7;
  --lq-emerald-dark:   #10B981;
  --lq-emerald-deep:   #022C22;
  --lq-emerald-ink:    #ECFDF5;

  /* CTA — in dark we flip: emerald bg + dark text (still Option B vibe, 5.97 AA) */
  --lq-cta-bg:         #10B981;   /* emerald-dark in dark theme */
  --lq-cta-on:         #022C22;
  --lq-cta-shadow:     0 4px 14px rgba(16, 185, 129, 0.32);

  --lq-border-subtle:  rgba(255, 255, 255, 0.05);
  --lq-border-default: rgba(255, 255, 255, 0.09);
  --lq-border-strong:  rgba(255, 255, 255, 0.16);
  --lq-border-emerald: rgba(52, 211, 153, 0.30);

  --lq-status-low:       #34D399;
  --lq-status-low-bg:    rgba(52, 211, 153, 0.14);
  --lq-status-low-ink:   #A7F3D0;
  --lq-status-medium:    #FBBF24;
  --lq-status-medium-bg: rgba(251, 191, 36, 0.14);
  --lq-status-medium-ink:#FDE68A;
  --lq-status-high:      #F87171;
  --lq-status-high-bg:   rgba(248, 113, 113, 0.14);
  --lq-status-high-ink:  #FECACA;
  --lq-status-critical:  #F87171;
  --lq-status-closed:    #64748B;
  --lq-status-unknown:   #64748B;

  --lq-cat-municipal:    #5EEAD4;
  --lq-cat-saaq:         #93C5FD;
  --lq-cat-clinic:       #6EE7B7;
  --lq-cat-hospital:     #FCA5A5;
  --lq-cat-pharmacy:     #C4B5FD;
  --lq-cat-canada:       #7DD3FC;

  --lq-map-ground: #1A2540;
  --lq-map-road:   #2A3760;
  --lq-map-water:  #1E3A5F;
  --lq-map-park:   #1F3D2F;
}

/* ─────────────────────────────────────────────
   Base font + helpers
   ───────────────────────────────────────────── */
.lq-font-display { font-family: var(--lq-font-display); font-weight: 400; letter-spacing: -0.01em; }
.lq-font-mono { font-family: var(--lq-font-mono); }
.lq-num { font-variant-numeric: tabular-nums; }