/* Leadspanic "Panic" tokens — concatenated for handoff. */

/* ==========================================================================
   Colors — Leadspanic "Panic" (1A). Dark-first.
   Base values first, then semantic aliases.
   NOTE: the primary logo BRAND-SHEET.md lists slightly different "print"
   values (red #FF3E30, lime #C6F542). The product system below (coral
   #ff5236, lime #b6ff3a) is the canonical, fully-specified working palette
   used across the app and the site overhaul; prefer these on-screen.
   ========================================================================== */
:root {
  /* ---- Brand & signal ---- */
  --coral:      #ff5236;   /* primary action, active tab, pin, brand */
  --coral-tint: #ff8a73;   /* coral text/labels on dark */
  --coral-deep: #e0432b;   /* pressed / gradient end */
  --lime:       #b6ff3a;   /* positive / good fit / success / "live" */
  --lime-deep:  #7dd320;   /* success gradient end */
  --amber:      #ffb020;   /* warning / mid-score */
  --sky:        #3ad1ff;   /* info */
  --indigo:     #7c8cff;   /* secondary comparison series */

  /* ---- Gradients ---- */
  --grad-brand:  linear-gradient(135deg, #ff5236 0%, #ff7a4d 100%);  /* @kind color */
  --grad-accent: linear-gradient(135deg, #b6ff3a 0%, #7dd320 100%);  /* @kind color */
  --grad-score:  linear-gradient(90deg, #ff5236 0%, #b6ff3a 100%);   /* @kind color */

  /* ---- Persona categorical palette (10-way map choropleth) ---- */
  --persona-1:  #ff5236;
  --persona-2:  #ffb020;
  --persona-3:  #b6ff3a;
  --persona-4:  #3ad1ff;
  --persona-5:  #7c8cff;
  --persona-6:  #ff7ac2;
  --persona-7:  #4be3a0;
  --persona-8:  #c98cff;
  --persona-9:  #ff9f6b;
  --persona-10: #6fe0d0;
  --persona-void: #101018;  /* empty / sparse tract */

  /* ---- Surfaces (dark) ---- */
  --canvas:     #08080b;   /* map / deepest background */
  --page:       #0b0b0f;   /* app background */
  --topbar:     #0e0e13;   /* header strip */
  --card:       #14141b;   /* panels, cards */
  --input:      #16161d;   /* inputs, chips, segmented bg */
  --inset:      #0d0d12;   /* nested wells, bar tracks */
  --ring-track: #22222b;   /* gauge / progress track */

  /* ---- Ink ---- */
  --text-primary:   #f4f4f6;
  --text-secondary: #cfcfd8;
  --text-label:     #b8b8c4;  /* uppercase labels / pen-portrait body */
  --text-muted:     #8a8a99;  /* captions */
  --text-faint:     #6b6b78;  /* placeholders, disabled */
  --on-accent:      #0b0b0f;  /* ink on coral/lime fills */

  /* ---- Borders ---- */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --border-focus:  rgba(255,82,54,0.40);

  /* ---- Semantic aliases ---- */
  --brand:      var(--coral);
  --accent:     var(--lime);
  --success:    var(--lime);
  --warning:    var(--amber);
  --danger:     var(--coral);
  --info:       var(--sky);

  --surface-page:  var(--page);
  --surface-card:  var(--card);
  --surface-input: var(--input);
  --surface-inset: var(--inset);

  --text-body:      var(--text-secondary);
  --text-heading:   var(--text-primary);
  --text-caption:   var(--text-muted);
  --text-placeholder: var(--text-faint);

  color-scheme: dark;
}


/* ==========================================================================
   Typography — Leadspanic "Panic" (1A)
   Display: Space Grotesk · Body/UI: Inter · Data/telemetry: JetBrains Mono
   ========================================================================== */
:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* ---- Type ramp (px) ---- */
  --fs-display: 56px;  /* hero headline (Space Grotesk 700, -.03em) */
  --fs-h1:      25px;  /* screen / card title (-.02em) */
  --fs-h2:      18px;
  --fs-h3:      15px;
  --fs-body:    13px;  /* default UI body */
  --fs-sm:      12px;
  --fs-label:   11px;  /* uppercase label, .05em, --text-label */
  --fs-data:    11px;  /* JetBrains Mono telemetry */
  --fs-mobile-display: 42px;

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-body:    1.6;  /* @kind font */

  /* ---- Tracking ---- */
  --ls-display: -0.03em; /* @kind font */
  --ls-heading: -0.02em; /* @kind font */
  --ls-tight:   -0.01em; /* @kind font */
  --ls-label:   0.05em;  /* @kind font */
  --ls-mono:    0.04em;  /* @kind font */
}


/* ==========================================================================
   Spacing & radii — Leadspanic "Panic" (1A)
   ========================================================================== */
:root {
  /* ---- Spacing scale (px) ---- */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 28px;
  --space-6: 40px;

  /* semantic */
  --pad-card:    18px;   /* card padding 18–22 */
  --pad-card-lg: 22px;
  --gutter:      18px;   /* screen gutters */
  --gap-card:    14px;   /* gaps between cards 12–16 */

  /* ---- Corner radii (px) ---- */
  --radius-chip:  7px;   /* small control */
  --radius-ctrl:  9px;   /* inner control */
  --radius-ctrl-2: 10px;
  --radius-input: 11px;  /* input / button */
  --radius-card:  14px;  /* card / panel */
  --radius-frame: 18px;  /* app frame / large surface */
  --radius-pill:  20px;  /* tag chips */
  --radius-round: 999px; /* gauges / pins / full pills */
}


/* ==========================================================================
   Effects — shadows, glows, glass, motion. Leadspanic "Panic" (1A)
   ========================================================================== */
:root {
  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.5);
  --shadow-card:  0 2px 12px rgba(0,0,0,0.4);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.5);
  --shadow-elevated: 0 20px 50px -20px rgba(0,0,0,0.6);
  --shadow-frame: 0 40px 90px -30px rgba(0,0,0,0.55);
  --shadow-toast: 0 16px 40px -12px rgba(0,0,0,0.7);
  --shadow-sheet: 0 -20px 50px rgba(0,0,0,0.5);  /* mobile draggable half-sheet */

  /* ---- Glows ---- */
  --glow-coral: 0 10px 26px -6px rgba(255,82,54,0.5);
  --glow-lime:  0 10px 26px -8px rgba(182,255,58,0.5);
  --glow-mark:  0 0 22px rgba(255,82,54,0.5);   /* brand-mark halo */

  /* ---- Glass ---- */
  --glass:        rgba(20,20,27,0.72);
  --glass-strong: rgba(20,20,27,0.85);
  --glass-stroke: rgba(255,255,255,0.08);
  --blur:         blur(14px); /* @kind other */

  /* ---- Focus ring ---- */
  --ring-focus: 0 0 0 3px rgba(255,82,54,0.18);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(.2,.7,.2,1);   /* @kind other */
  --ease-pop:  cubic-bezier(.2,.9,.3,1.2); /* @kind other */
  --dur-fast:  0.14s; /* @kind other */
  --dur-base:  0.18s; /* @kind other */
  --dur-slow:  0.38s; /* @kind other */
}

/* ---- Signature keyframes ---- */
@keyframes lp-pulse   { 0%{transform:translate(-50%,-50%) scale(1);opacity:.5} 70%{transform:translate(-50%,-50%) scale(2.6);opacity:0} 100%{opacity:0} }
@keyframes lp-blink   { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes lp-rise    { 0%{opacity:0;transform:translateY(14px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes lp-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes lp-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes lp-sweep   { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes lp-spin    { to{transform:rotate(360deg)} }