/* ══════════════════════════════════════════════════════════
   Design Tokens — City of Tallahassee RCA
   Light-mode default · Professional minimalist
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── COT Brand ── */
  --cot: #2AABE2;
  --cot-hover: #1E9BD0;
  --cot-active: #1889BA;
  --cot-50: #F0F9FE;
  --cot-100: #DCF1FB;
  --cot-200: #B3E2F5;
  --cot-glow: rgba(42,171,226,0.10);
  --charcoal: #4D4D4F;

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

  /* ── Semantic Surfaces ── */
  --bg: var(--gray-50);
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-inset: var(--gray-100);
  --surface-hover: var(--gray-50);

  /* ── Borders ── */
  --border: var(--gray-200);
  --border-light: var(--gray-100);

  /* ── Text ── */
  --text: var(--gray-900);
  --text-2: var(--gray-600);
  --text-3: var(--gray-400);
  --text-inv: var(--white);

  /* ── Status Colors ── */
  --green: #059669; --green-bg: #ECFDF5; --green-border: #A7F3D0;
  --amber: #D97706; --amber-bg: #FFFBEB; --amber-border: #FDE68A;
  --orange: #EA580C; --orange-bg: #FFF7ED; --orange-border: #FDBA74;
  --red: #DC2626;   --red-bg: #FEF2F2;   --red-border: #FECACA;

  /* ── Categories ── */
  --c1: var(--green); --c1-bg: var(--green-bg);
  --c2: var(--amber); --c2-bg: var(--amber-bg);
  --c3: var(--orange); --c3-bg: var(--orange-bg);
  --c4: var(--red);   --c4-bg: var(--red-bg);

  /* ── Spacing (4px base) ── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* ── Radius ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px;

  /* ── Shadows ── */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.04);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --sh-md: 0 4px 16px rgba(0,0,0,0.05);
  --sh-lg: 0 8px 30px rgba(0,0,0,0.07);
  --sh-focus: 0 0 0 4px var(--cot-glow);

  /* ── Type ── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* ── Motion ── */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 0.18s;
}

/* ── Dark mode (opt-in via data-theme or system) ── */
[data-theme="dark"] {
  --bg: #0C0D12; --surface: #15171E; --surface-raised: #1A1D26;
  --surface-inset: #111318; --surface-hover: #1E2028;
  --border: rgba(255,255,255,0.07); --border-light: rgba(255,255,255,0.04);
  --text: rgba(255,255,255,0.92); --text-2: rgba(255,255,255,0.58);
  --text-3: rgba(255,255,255,0.30); --white: #15171E;
  --gray-50: #111318; --gray-100: #15171E; --gray-200: rgba(255,255,255,0.07);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.4); --sh-md: 0 4px 20px rgba(0,0,0,0.5);
  --sh-lg: 0 8px 40px rgba(0,0,0,0.6);
}