/* ═══════════════════════════════════════════════════════════════
   ExpertPitch — design tokens
   Distilled from measured computed styles (design/design-profile.json).
   Neutrals match the measured system exactly; accent hues are the
   user's blue mapped from the source's pastel violet.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* palette — neutrals (black theme) */
  --bg: #0a0a0a;
  --surface: #0d0d0d;
  --glass-50: rgba(13, 13, 13, 0.5);
  --glass-40: rgba(13, 13, 13, 0.4);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-12: rgba(255, 255, 255, 0.12);
  --text: #fbfafc;
  --text-muted: #999999;
  --text-soft: #c2c2c2;
  --text-60: rgba(251, 250, 252, 0.6);
  --border-10: rgba(255, 255, 255, 0.10);
  --border-07: rgba(255, 255, 255, 0.07);
  --border-30: rgba(255, 255, 255, 0.30);
  --border-50: rgba(255, 255, 255, 0.50);

  /* palette — accents (blue theme) */
  --accent: #3b82f6;          /* vibrant blue accent */
  --accent-deep: #2563eb;     
  --accent-strong: #1d4ed8;   
  --accent-30: rgba(59, 130, 246, 0.30);
  --accent-50: rgba(37, 99, 235, 0.50);
  --green: #1aff75;

  /* typography (measured scale) */
  --font: 'Satoshi', 'Instrument Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --display-size: clamp(46px, 7vw, 90px);
  --display-track: -0.05em;      /* -4.5px @ 90px */
  --display-leading: 1.1;        /* 99/90 */
  --title-size: clamp(34px, 4.4vw, 56px);
  --title-track: -0.05em;        /* -2.8px @ 56px */
  --title-leading: 1.2;          /* 67.2/56 */
  --h2-size: 28px;
  --h2-leading: 1.5;             /* 42/28 */
  --h2-track: -0.02em;
  --h3-size: 28px;
  --h3-track: -0.05em;
  --h4-size: 24px;
  --h4-track: -0.02em;
  --body-size: 14px;
  --body-leading: 1.2;           /* 16.8/14 */
  --body-track: -0.02em;
  --lead-size: 18px;
  --lead-leading: 1.5;           /* 27/18 */

  /* spacing (measured steps) */
  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-9: 36px; --s-12: 48px; --s-16: 64px;

  /* radii (measured) */
  --r-pill: 999px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-card: 30px;
  --r-band: 50px;
  --r-faq: 96px;

  /* shadows (measured layering, accent glow re-hued) */
  --shadow-btn: 0 4px 10px -2px rgba(0, 0, 0, 0.05), 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --shadow-btn-accent: 0 4px 10px -2px rgba(0, 0, 0, 0.05), 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 6px 26px -4px rgba(101, 132, 224, 0.55);
  --shadow-card: 0 4px 10px -2px rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.1);

  /* layout (measured) */
  --container: 1200px;
  --nav-h: 108px;
  --section-y: 64px;

  /* motion (observed pattern; computed values were suppressed) */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Reference motion measured live: transforms 0.22s ease, accordions
     0.25–0.35s ease-out. 0.7s sat 2–3x outside that band and read floaty.
     0.45s is an approximation: the reference's entrance animations are
     Framer JS inline transforms, not CSS, so they can't be read exactly. */
  --dur: 0.45s;
  --marquee-dur: 32s;
}