/* ============================================================
   CrashPricer — design tokens

   Every value below is lifted from the CrashPricer mockup set
   (SnapPrice- light.dc.html) so the site and the app are one
   system: same typeface, same ink, same green, same warm ground.

   Composition takes its cues from two reference systems —
   "Hims App" (calm canvas, one chromatic voice, long-spread
   shadows, generous radii) and "Slush" (sculptural display
   type, pill navigation, hairline rules, alternating grounds).
   ============================================================ */
:root {
  /* — ink — */
  --ink:        #0E1A2B;  /* primary text, dark surfaces */
  --ink-soft:   #16263C;
  --ink-deep:   #0A1320;
  --device:     #0A0A0B;  /* the device body in every mockup */

  /* — the single chromatic voice — */
  --green:        #16A34A;  /* logo mark, icons */
  --green-bright: #22C55E;  /* primary action fill */
  --green-deep:   #15803D;  /* green on light, eyebrows */
  --green-pale:   #E7F7EC;
  --green-line:   #D1F0DB;

  /* — supporting semantics, used exactly as the app uses them — */
  --amber:      #B45309;
  --amber-mid:  #F59E0B;
  --amber-pale: #FEF3C7;

  /* — surfaces — */
  --paper:   #FFFFFF;
  --canvas:  #E7E5DF;  /* the warm ground the mockups are pinned to */
  --canvas-2:#EFEDE7;
  --app-bg:  #F4F5F7;  /* the app's own canvas */
  --mist:    #F1F3F6;
  --mist-2:  #EFF1F4;

  /* — text — */
  --text:    #0E1A2B;
  --text-2:  #5B6573;
  --text-3:  #6B7684;
  --text-4:  #7C8696;
  --text-5:  #8A94A2;

  /* — lines — */
  --line:      #D6D3CB;  /* on the warm ground */
  --line-soft: #E3E8ED;  /* on white */
  --line-firm: #C9D2DC;

  /* — type — one family, as in the mockups — */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-micro:    0.6875rem;   /* 11 — uppercase labels */
  --t-caption:  0.8125rem;   /* 13 */
  --t-body-sm:  0.9375rem;   /* 15 */
  --t-body:     1rem;        /* 16 — the mockups' body size */
  --t-lede:     1.1875rem;   /* 19 */
  --t-h4:       1.375rem;
  --t-h3:       clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
  --t-h2:       clamp(2rem, 1.2rem + 2.8vw, 3.85rem);
  --t-thesis:   clamp(2.5rem, 0.9rem + 5.2vw, 5.75rem);
  --t-h1:       clamp(2.6rem, 1rem + 4vw, 4.5rem);
  --t-display:  clamp(3rem, 0.8rem + 7.4vw, 8rem);

  /* — shape — the mockups run 14 / 16 / 22 / 28, pill for actions — */
  --r-sm:   14px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* — elevation — the app's own shadow ramp, extended for the page — */
  --sh-xs:    0 4px 12px -6px rgba(13,24,41,.20);
  --sh-sm:    0 8px 20px -10px rgba(13,24,41,.34);
  --sh-card:  0 18px 48px -24px rgba(13,24,41,.30);
  --sh-float: 0 34px 70px -24px rgba(13,24,41,.43);
  --sh-lift:  0 34px 96px -32px rgba(13,24,41,.42);
  --sh-phone: 0 70px 140px -46px rgba(13,24,41,.60), 0 34px 70px -24px rgba(13,24,41,.43);
  --sh-glow:  0 18px 44px -16px rgba(34,197,94,.55);

  /* — layout — */
  --wrap:   1280px;
  --narrow: 860px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --sec-y:  clamp(88px, 11vw, 168px);

  /* — motion — */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.32,.72,0,1);
}