/* =========================================================================
   Prospect Card Radar: design tokens, v2 (Phase 2, Oct 2026)
   -------------------------------------------------------------------------
   Variables only. No selectors that style anything. Every new-system page
   loads:  tokens.css -> base.css -> components.css  (in that order).
   Old pages keep loading styles/site.css and are not affected by this file.

   Direction: Cult UI / shadcn lineage. White surfaces, cool neutral grays,
   hairline borders, one brand color. Ink is #333, never true black.
   Contrast notes are WCAG ratios against #ffffff.
   ========================================================================= */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --background:      #ffffff;   /* page */
  --surface:         #fafafa;   /* subtle bands, table headers */
  --muted:           #f4f4f5;   /* chips, hover fills, skeletons */
  --muted-hover:     #ececee;
  --border:          #e4e4e7;   /* hairlines, cards, inputs */
  --border-strong:   #d4d4d8;   /* input hover, dividers that must show */

  /* ---- Text -------------------------------------------------------------- */
  --foreground:      #333333;   /* 12.6:1  body + headings (no true black) */
  --muted-fg:        #6b6b70;   /*  5.3:1  secondary text, labels */
  --subtle-fg:       #8a8a90;   /*  3.4:1  decorative / disabled only, never body copy */

  /* ---- Brand: orange ----------------------------------------------------- */
  --primary:         #ff5a1f;   /*  3.1:1  fills, icons, focus, large display text */
  --primary-hover:   #e14a12;
  --primary-ink:     #c93f0c;   /*  5.0:1  orange TEXT at body sizes (links, labels) */
  --primary-soft:    #fff1eb;   /* tinted backgrounds */
  --primary-border:  #ffd2c0;
  --primary-fg:      #ffffff;   /* text/icon on an orange fill, incl. primary buttons (semibold) */
  --ring:            rgba(255, 90, 31, 0.35);

  /* ---- Data signals (price basis + direction) ---------------------------- */
  /* House rule: SOLD = green, ASKING = orange, never blue. */
  --sold:            #15803d;   /*  5.0:1 */
  --sold-soft:       #ecfdf3;
  --sold-border:     #bbf0cf;
  --asking:          var(--primary-ink);
  --asking-soft:     var(--primary-soft);
  --asking-border:   var(--primary-border);
  --up:              #15803d;
  --down:            #b91c1c;   /*  6.5:1 */
  --down-soft:       #fef2f2;
  --warning:         #b45309;
  --warning-soft:    #fffbeb;

  /* Chart series (fills/lines, not text) */
  --chart-sold:      #16a34a;
  --chart-asking:    #ff5a1f;
  --chart-grid:      #ececee;
  --chart-axis:      #a1a1aa;

  /* ---- Type -------------------------------------------------------------- */
  /* Two families: Geist for everything you read, Geist Mono for every number
     you compare (prices, ranks, counts, dates) so digits line up. */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;    /* 12  captions, badges */
  --text-sm:   0.875rem;   /* 14  UI labels, table cells */
  --text-base: 1rem;       /* 16  body copy */
  --text-lg:   1.125rem;   /* 18  lead paragraphs */
  --text-xl:   1.25rem;    /* 20  card titles */
  --text-2xl:  1.5rem;     /* 24  section titles */
  --text-3xl:  2rem;       /* 32  page titles */
  --text-4xl:  2.5rem;     /* 40  hero (mobile) */
  --text-5xl:  3.25rem;    /* 52  hero (desktop) */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;
  --tracking-tight: -0.025em;  /* headings */
  --tracking-wide:   0.04em;   /* small caps labels */

  /* ---- Space: 4px grid --------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ---- Shape + depth ----------------------------------------------------- */
  --radius-sm:   6px;    /* badges, small controls */
  --radius:      8px;    /* buttons, inputs */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   16px;   /* large panels */
  --radius-full: 999px;  /* pills, search bar */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.16), 0 4px 10px -4px rgba(0, 0, 0, 0.06);

  /* ---- Layout + motion --------------------------------------------------- */
  --container:  1200px;
  --gutter:     16px;
  --header-h:   64px;
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --duration:   150ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}