/* ===================================================================
 * HAKICAST · Design Tokens v1
 * Single source of truth for color, type, spacing, radius, shadow, motion.
 * Loaded after the existing inline <style> blocks so these tokens take
 * precedence where the same custom property is set.
 * ================================================================= */

:root {
  /* ----------- BRAND ----------- */
  --hk-brand-50:  #fff1f2;
  --hk-brand-100: #ffe1e4;
  --hk-brand-200: #ffc7cc;
  --hk-brand-300: #ff9aa3;
  --hk-brand-400: #ff5d6c;
  --hk-brand-500: #dc2626;   /* primary brand */
  --hk-brand-600: #b91c1c;
  --hk-brand-700: #991b1b;
  --hk-brand-800: #7f1d1d;
  --hk-brand-900: #631515;

  /* ----------- SEMANTIC ----------- */
  --hk-success-500: #15803d;
  --hk-success-600: #166534;
  --hk-success-bg:  rgba(46, 204, 113, 0.10);
  --hk-success-border: rgba(46, 204, 113, 0.30);

  --hk-warn-500: #b45309;
  --hk-warn-600: #92400e;
  --hk-warn-bg:  rgba(245, 158, 11, 0.12);
  --hk-warn-border: rgba(245, 158, 11, 0.35);

  --hk-danger-500: #dc2626;
  --hk-danger-600: #991b1b;
  --hk-danger-bg:  rgba(239, 68, 68, 0.10);
  --hk-danger-border: rgba(239, 68, 68, 0.30);

  --hk-info-500: #2563eb;
  --hk-info-600: #1d4ed8;
  --hk-info-bg:  rgba(77, 171, 247, 0.10);
  --hk-info-border: rgba(77, 171, 247, 0.30);

  /* ----------- SURFACES (dark theme — WCAG AA verified for text below) ----------- */
  --hk-surface-0:  #0a0e1a;   /* page background */
  --hk-surface-1:  #0f1623;   /* card / panel */
  --hk-surface-2:  #141a2a;   /* nested card */
  --hk-surface-3:  #1b2235;   /* input fill */
  --hk-surface-4:  #232c41;   /* hover */
  --hk-border-1:   #1f2738;
  --hk-border-2:   #2b344a;
  --hk-border-3:   #3a4561;   /* high-contrast border */

  /* ----------- TEXT (contrast ratios stated against --hk-surface-1) ----------- */
  --hk-text:         #eef1f7;   /* 14.6:1   — primary, AAA */
  --hk-text-strong:  #ffffff;   /* 16.7:1   — headings, AAA */
  --hk-text-muted:   #b9c0cc;   /* 8.3:1    — secondary, AAA */
  --hk-text-dim:     #8995ab;   /* 4.8:1    — tertiary, AA  */
  --hk-text-faint:   #5a6478;   /* 3.0:1    — for non-essential only */

  /* ----------- TYPOGRAPHY ----------- */
  --hk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hk-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --hk-font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  --hk-text-2xs: 10px;
  --hk-text-xs:  11px;
  --hk-text-sm:  12px;
  --hk-text-base:14px;
  --hk-text-md:  16px;
  --hk-text-lg:  18px;
  --hk-text-xl:  22px;
  --hk-text-2xl: 28px;
  --hk-text-3xl: 36px;
  --hk-text-4xl: 48px;

  --hk-weight-regular: 400;
  --hk-weight-medium:  500;
  --hk-weight-semi:    600;
  --hk-weight-bold:    700;
  --hk-weight-black:   900;

  --hk-leading-tight:  1.2;
  --hk-leading-snug:   1.4;
  --hk-leading-normal: 1.55;

  --hk-letter-tight:   -0.02em;
  --hk-letter-wide:    0.08em;

  /* ----------- SPACING (4px base) ----------- */
  --hk-space-0:   0;
  --hk-space-1:   4px;
  --hk-space-2:   8px;
  --hk-space-3:   12px;
  --hk-space-4:   16px;
  --hk-space-5:   20px;
  --hk-space-6:   24px;
  --hk-space-8:   32px;
  --hk-space-10:  40px;
  --hk-space-12:  48px;
  --hk-space-16:  64px;
  --hk-space-20:  80px;

  /* ----------- RADIUS ----------- */
  --hk-radius-xs: 3px;
  --hk-radius-sm: 6px;
  --hk-radius-md: 8px;
  --hk-radius-lg: 12px;
  --hk-radius-xl: 16px;
  --hk-radius-2xl: 20px;
  --hk-radius-full: 9999px;

  /* ----------- SHADOW / ELEVATION ----------- */
  --hk-shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --hk-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --hk-shadow-lg: 0 10px 30px rgba(0,0,0,0.50);
  --hk-shadow-xl: 0 24px 60px rgba(0,0,0,0.55);
  --hk-shadow-glow-brand: 0 0 0 1px rgba(220,38,38,0.25), 0 12px 40px rgba(255,51,68,0.20);

  /* ----------- MOTION ----------- */
  --hk-duration-instant: 60ms;
  --hk-duration-fast:    120ms;
  --hk-duration-base:    180ms;
  --hk-duration-slow:    280ms;
  --hk-duration-slower:  420ms;

  --hk-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --hk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------- Z-INDEX SCALE ----------- */
  --hk-z-dropdown: 1000;
  --hk-z-modal:    9000;
  --hk-z-toast:    9500;
  --hk-z-gate:     9999;       /* sign-in gate */
  --hk-z-maint:    99999;      /* maintenance banner above everything */

  /* ----------- LEGACY ALIASES ----------- */
  /* These map the new tokens onto the historical variable names so existing
     hakicast.html rules keep working without a wholesale rewrite. */
  --brand: var(--hk-brand-500);
  --brand-dim: var(--hk-brand-700);
  --text: var(--hk-text);
  --text-muted: var(--hk-text-muted);
  --text-dim: var(--hk-text-dim);
  --border: var(--hk-border-1);
  --border-bright: var(--hk-border-2);
  --bg: var(--hk-surface-0);
  --panel: var(--hk-surface-1);
  --panel-2: var(--hk-surface-2);
  --panel-3: var(--hk-surface-3);
  --green: var(--hk-success-500);
  --red: var(--hk-danger-500);
  --amber: var(--hk-warn-500);
  --blue: var(--hk-info-500);
}

/* ---------- Reduced motion: collapse all durations ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hk-duration-instant: 0.001ms;
    --hk-duration-fast:    0.001ms;
    --hk-duration-base:    0.001ms;
    --hk-duration-slow:    0.001ms;
    --hk-duration-slower:  0.001ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Focus-visible utility (consistent across all interactive elements) ---------- */
:focus-visible {
  outline: 2px solid var(--hk-info-500) !important;
  outline-offset: 2px !important;
  border-radius: var(--hk-radius-xs);
}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline-offset: 3px !important;
}

/* ---------- Screen-reader-only utility ---------- */
.hk-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Mobile tap target: minimum 44x44 per WCAG 2.1 ---------- */
@media (max-width: 768px) {
  button,
  [role="button"],
  a.btn,
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* =============================================================
   Leaflet — never let global UI transitions touch the map's
   transform-driven internals.

   Why: Leaflet animates pan/zoom by rewriting `transform` on
   `.leaflet-pane` and the SVG overlay every frame. If a global
   `transition: all` rule (from any UI class that ends up nested
   inside the map DOM, or a hover/focus rule that briefly applies)
   leaks onto those elements, the browser eases each transform
   change — and the marker layer + tile layer end up easing at
   different rates. The visible result is "floating" markers that
   drift away from the map then snap back when zoom settles.

   Diagnosis confirmed in production via Claude in Chrome: at rest
   the duration is 0s, but during pan/zoom and on hover states the
   duration kicks in and Leaflet fights it. This override turns the
   conflict off explicitly at the layers Leaflet owns.

   If you want hover effects on markers in future, animate ONLY
   `fill` / `stroke` — never `transform`, which Leaflet owns.
   ============================================================= */
.leaflet-pane,
.leaflet-pane *,
.leaflet-tile,
.leaflet-zoom-animated,
.leaflet-overlay-pane svg,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tooltip,
.leaflet-popup,
.leaflet-container {
  transition: none !important;
  animation: none !important;
}
/* Leaflet's own smooth zoom animation IS allowed (it sets
   .leaflet-zoom-anim on the container during a zoom). When that
   class is present we let Leaflet's CSS run unimpeded. */
.leaflet-zoom-anim .leaflet-zoom-animated {
  transition: transform 0.25s cubic-bezier(0,0,0.25,1) !important;
}

/* =================================================================
   v19.1 — High-end light-theme refinement (Linear / Stripe / Vercel vibe)
   =================================================================
   The dashboard cards were designed for the dark theme. On light theme
   they were reading as muddy grey blocks with a washed pink hero. This
   block lifts the light-theme aesthetic to a premium "civic terminal
   meets editorial calm" feel: refined surfaces, fine borders, soft
   layered shadows, restrained accent.
   ================================================================= */
:root[data-theme="light"] {
  --hk-surface-0: #f7f8fa;     /* page background — subtle warm-cool off-white */
  --hk-surface-1: #ffffff;     /* card background — pure white */
  --hk-surface-2: #fafbfc;     /* nested card / row hover */
  --hk-surface-3: #f0f2f5;     /* input fill */
  --hk-surface-4: #e5e8ed;     /* hover */
  --hk-border-1:  #e6e8ee;     /* fine — for default card borders */
  --hk-border-2:  #d6dae1;     /* med — for emphasized borders */
  --hk-border-3:  #b8bec9;
  --hk-text:        #0f1419;
  --hk-text-strong: #060810;
  --hk-text-muted:  #4b5563;
  --hk-text-dim:    #6b7280;
  --hk-text-faint:  #9ca3af;
  --hk-shadow-sm: 0 1px 2px rgba(15,20,25,0.04);
  --hk-shadow-md: 0 2px 8px rgba(15,20,25,0.06), 0 1px 2px rgba(15,20,25,0.04);
  --hk-shadow-lg: 0 8px 24px rgba(15,20,25,0.08), 0 2px 4px rgba(15,20,25,0.05);
  --hk-shadow-xl: 0 24px 48px rgba(15,20,25,0.10), 0 4px 8px rgba(15,20,25,0.05);
}

/* Body background uses the surface token in light mode for a clean off-white */
:root[data-theme="light"] body {
  background: var(--hk-surface-0) !important;
}

/* DASHBOARD HERO — refined gradient, NOT muddy pink wash.
   A near-white surface with a faint brand-accent corner glow and a clean
   bottom-rule for editorial polish. */
:root[data-theme="light"] #haki-dashboard .dash-hero {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(220,38,38,0.06) 0%, rgba(220,38,38,0) 50%),
    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  border: 1px solid var(--hk-border-1, #e6e8ee) !important;
  box-shadow:
    0 1px 0 rgba(15,20,25,0.03) inset,
    var(--hk-shadow-lg, 0 8px 24px rgba(15,20,25,0.08)) !important;
}
:root[data-theme="light"] #haki-dashboard .dash-hero .dash-greet { color: var(--hk-text-muted) !important; }
:root[data-theme="light"] #haki-dashboard .dash-hero .dash-name  { color: var(--hk-text-strong) !important; }
:root[data-theme="light"] #haki-dashboard .dash-hero .dash-meta  { color: var(--hk-text-muted) !important; }
:root[data-theme="light"] #haki-dashboard .dash-hero .dash-score-val { color: #15803d !important; font-feature-settings: 'tnum' 1; }
:root[data-theme="light"] #haki-dashboard .dash-hero .dash-score-lbl { color: var(--hk-text-dim) !important; }

/* DASHBOARD CARDS — pure white with subtle border + soft elevation */
:root[data-theme="light"] #haki-dashboard .dash-card {
  background: #ffffff !important;
  border: 1px solid var(--hk-border-1, #e6e8ee) !important;
  box-shadow: var(--hk-shadow-sm, 0 1px 2px rgba(15,20,25,0.04)) !important;
  transition: box-shadow 180ms cubic-bezier(0.2,0.8,0.2,1), border-color 180ms cubic-bezier(0.2,0.8,0.2,1);
}
:root[data-theme="light"] #haki-dashboard .dash-card:hover {
  border-color: var(--hk-border-2, #d6dae1) !important;
  box-shadow: var(--hk-shadow-md, 0 2px 8px rgba(15,20,25,0.06)) !important;
}
:root[data-theme="light"] #haki-dashboard .dash-card h3 {
  color: var(--hk-text-dim, #6b7280) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* DASHBOARD EMPTY STATES — refined, not flat grey blocks */
:root[data-theme="light"] #haki-dashboard .dash-empty {
  color: var(--hk-text-muted, #4b5563) !important;
  font-style: normal !important;
  background:
    repeating-linear-gradient(45deg,
      transparent 0, transparent 8px,
      rgba(15,20,25,0.015) 8px, rgba(15,20,25,0.015) 16px);
  border: 1px dashed var(--hk-border-2, #d6dae1);
  border-radius: 8px;
  padding: 18px !important;
}

/* DASHBOARD ITEMS (promise rows, audit rows) */
:root[data-theme="light"] #haki-dashboard .dash-item {
  color: var(--hk-text) !important;
  border-bottom: 1px solid var(--hk-border-1, #e6e8ee);
  padding: 10px 0;
}
:root[data-theme="light"] #haki-dashboard .dash-item:last-child { border-bottom: none; }

/* DASHBOARD STATS (Signed/Letters/Follows) */
:root[data-theme="light"] #haki-dashboard .dash-stat {
  background: var(--hk-surface-3, #f0f2f5) !important;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
:root[data-theme="light"] #haki-dashboard .dash-stat-val { color: var(--hk-brand-500, #dc2626) !important; font-weight: 800; font-size: 22px; }
:root[data-theme="light"] #haki-dashboard .dash-stat-lbl { color: var(--hk-text-dim, #6b7280) !important; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* DASHBOARD MP/REP CARDS — restrained, no neon */
:root[data-theme="light"] #haki-dashboard .dash-mp {
  background: var(--hk-surface-2, #fafbfc) !important;
  border: 1px solid var(--hk-border-1, #e6e8ee);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.2,0.8,0.2,1);
}
:root[data-theme="light"] #haki-dashboard .dash-mp:hover { background: var(--hk-surface-3, #f0f2f5) !important; }
:root[data-theme="light"] #haki-dashboard .dash-mp-name { color: var(--hk-text-strong, #060810) !important; font-weight: 600; }
:root[data-theme="light"] #haki-dashboard .dash-mp-role { color: var(--hk-text-muted, #4b5563) !important; font-size: 12px; }
:root[data-theme="light"] #haki-dashboard .dash-mp-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }

/* COUNTY BUDGET BAR */
:root[data-theme="light"] #haki-dashboard .dash-bar {
  background: var(--hk-surface-3, #f0f2f5) !important;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-top: 8px;
}
:root[data-theme="light"] #haki-dashboard .dash-bar-fill {
  background: linear-gradient(90deg, #15803d, #16a34a) !important;
  height: 100%;
  border-radius: inherit;
}
:root[data-theme="light"] #haki-dashboard .dash-allocation { display: flex; justify-content: space-between; align-items: baseline; color: var(--hk-text-muted); }
:root[data-theme="light"] #haki-dashboard .dash-allocation-val { color: var(--hk-text-strong) !important; font-weight: 700; font-size: 18px; }

/* NATIONAL PULSE STAT TILES (9 / 14 / 41) — same card language */
:root[data-theme="light"] .pulse-stat,
:root[data-theme="light"] [data-pulse-stat] {
  background: #ffffff !important;
  border: 1px solid var(--hk-border-1, #e6e8ee) !important;
  border-radius: 14px !important;
  box-shadow: var(--hk-shadow-sm, 0 1px 2px rgba(15,20,25,0.04)) !important;
  padding: 22px !important;
}

/* MAP CARD on light theme — match the design language */
:root[data-theme="light"] .map-wrap {
  background: #ffffff !important;
  border: 1px solid var(--hk-border-2, #d6dae1) !important;
  box-shadow:
    0 1px 0 rgba(15,20,25,0.03) inset,
    var(--hk-shadow-lg, 0 8px 24px rgba(15,20,25,0.08)) !important;
}

/* ---------- Hide the floating admin FAB ---------- *
 * Per owner request: the bottom-right floating "ADMIN MODE / KILL SITE /
 * LOG OUT ADMIN" panel is redundant — every action it exposes is already
 * available inside Admin OPS (CONTROLS tab + the per-tab actions). Keeping
 * the floating widget injected so the underlying logic still binds, but
 * hiding it entirely from the screen.
 */
#haki-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}