/* ==========================================================================
   Design tokens — extracted 1:1 from the Claude Design export.
   Nothing here is a new design decision; values come from the desktop file
   (source of truth) and the mobile reference.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --c-red: #DA000F;
  --c-orange: #F0620F;
  --c-red-deep: #B00010;
  --grad-cta: linear-gradient(100deg, #DA000F, #F0620F);
  --grad-card: linear-gradient(150deg, #DA000F, #F0620F);
  --grad-icon: linear-gradient(135deg, #DA000F, #F0620F);
  --grad-warm-text: linear-gradient(100deg, #FF3B3B, #F08A1D);

  /* ---- Surfaces ---- */
  --c-ink: #12181F;          /* dark sections, headings */
  --c-ink-band: #0E141A;     /* facts strip */
  --c-ink-hero: #0C1116;     /* hero base */
  --c-ink-footer: #0C1116;
  --c-beige: #F2EFE9;
  --c-offwhite: #FBFAF7;
  --c-offwhite-2: #FDFCFA;
  --c-white: #fff;
  --c-warm-1: #FFF1EC;
  --c-warm-2: #FFF4F3;
  --c-warm-3: #FFF6F1;
  --c-warm-4: #FFF0F0;
  --c-field: #F6F4F0;        /* inputs, chips (light card) */
  --c-field-hero: #F4F1EB;   /* inputs, chips (hero card) */

  /* ---- Text ---- */
  --c-text: #3E4850;
  --c-text-muted: #5C666F;
  /* Design values were #8A939B / #6E7883. Darkened to the minimum that
     clears WCAG AA 4.5:1 on the lightest surface each one sits on
     (4.59:1 and 4.53:1). Same hue, nothing else changed. */
  --c-text-meta: #666D73;
  --c-text-soft: #616A73;
  --c-on-dark: #B7C0C8;
  --c-on-dark-body: #C2CBD3;
  --c-on-dark-meta: #98A2AC;
  --c-red-on-dark: #FF3B3B;
  --c-red-on-dark-2: #FF5A57;
  --c-red-on-dark-3: #FF7B79;

  /* ---- Borders ---- */
  --c-border: #EFE9E0;
  --c-border-3: #E3DCD1;
  --c-border-warm: #F6DCCB;
  --c-border-field: #E2DED6;
  --c-border-dark: rgba(255, 255, 255, .10);

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-card: 0 10px 28px rgba(18, 24, 31, .05);
  --sh-card-sm: 0 8px 22px rgba(18, 24, 31, .05);
  --sh-card-hover-neutral: 0 22px 46px rgba(18, 24, 31, .13);
  --sh-cta-hover: 0 14px 32px rgba(218, 0, 15, .34);
  --sh-panel-dark: 0 14px 34px rgba(18, 24, 31, .16);

  /* ---- Layout ---- */
  --container: 1240px;
  --gutter: clamp(22px, 6.4vw, 56px);
  --section-y: clamp(52px, 7vw, 100px);
  --card-pad: clamp(20px, 2.4vw, 32px);
  --header-h: 74px;
  --stickybar-h: 76px;

  /* ---- Type ----
     Fluid ramps interpolate the mobile reference (375px) to the
     desktop source of truth (1440px). */
  --fs-h1: clamp(27px, min(8.5vw, 24.9px + 2.16vw), 56px);
  --fs-h2: clamp(28px, 22.4px + 1.50vw, 44px);
  --fs-lead: clamp(15.5px, 15px + 0.14vw, 17px);
  --fs-body: clamp(15px, 14.5px + 0.14vw, 16.5px);
  --fs-card-title: clamp(17px, 16.3px + 0.19vw, 20px);
  --fs-card-body: 14.5px;
  --fs-eyebrow: clamp(12px, 11.6px + 0.09vw, 13px);
  --fs-salary: clamp(42px, 29.3px + 3.38vw, 78px);

  /* ---- Motion ---- */
  --t-fast: .18s ease;
  --t-base: .22s ease;
  --t-slow: .28s ease;
}