/* ═══════════════════════════════════════════════════════════════
   Design Tokens — The Funnel
   Per constitution: Fraunces (display), DM Sans (body), navy/gold/teal
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Color: core ────────────────────────────────────────── */
  --navy:        #0F2B4C;
  --navy-soft:   #1B3A5C;
  --gold:        #C4922A;
  --gold-light:  #D4A843;
  --gold-subtle: rgba(196, 146, 42, 0.08);

  /* ── Color: per-brand accents (used on result cards only) ─ */
  --visor:       #2A9D8F;
  --visor-light: #3DB5A6;
  --ledbetter:   #3B82F6;
  --recs:        #E76F51;
  --bedrock:     #6B21A8;

  /* ── Color: neutrals ────────────────────────────────────── */
  --bg:          #F8F6F3;
  --surface:     #FFFFFF;
  --border:      #E8E4DF;
  --border-hover:#D1CBC3;

  /* ── Color: text ────────────────────────────────────────── */
  --text:        #2D3748;
  --text-muted:  #718096;
  --text-faint:  #A0AEC0;

  /* ── Color: semantic ────────────────────────────────────── */
  --success:     #38A169;
  --warning:     #D69E2E;
  --error:       #E53E3E;
  --info:        #3182CE;

  /* ── Type ────────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;

  /* ── Spacing (8px base) ─────────────────────────────────── */
  --sp-2xs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-full: 9999px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --t-micro:  100ms;
  --t-short:  200ms;
  --t-med:    300ms;
  --t-long:   500ms;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 43, 76, 0.04), 0 1px 3px rgba(15, 43, 76, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 43, 76, 0.06), 0 4px 8px rgba(15, 43, 76, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 43, 76, 0.08), 0 8px 16px rgba(15, 43, 76, 0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}