/* ============================================================
   Design tokens — SoberRides.org v3
   Values verified against the Figma "Home - Desktop" frame.
   ============================================================ */
:root {
    /* ---- Brand palette (exact Figma hexes) ---- */
    --green:        #32873f;   /* primary brand green */
    --green-deep:   #276b32;
    --green-rich:   #1f5527;   /* button hover / pressed */
    --green-tint:   #e8f1e9;
    --green-light:  #74c686;   /* lightened brand green — ~3.8:1 on the olive footer / dark spinner cards (accessible non-white hover) */
    --olive:        #505444;   /* footer band, 3rd hero panel, cost stripe */
    --olive-deep:   #3f4235;
    --dark:         #231f20;   /* near-black sections, 1st hero panel, ink */
    --ink:          #231f20;   /* body text */
    --ink-soft:     #5b6157;
    --sage:         #e9f0e6;   /* light section background (hero, testimonials) */
    --sage-panel:   #f4f8f1;   /* page background */
    --cream:        #f4f7ee;
    --white:        #ffffff;
    --line:         #d7ddd2;
    --x-mark:       #32873f;   /* the cross in the hero substances list */
    --amber:        #e0a23f;

    /* ---- Shadows ---- */
    --shadow-hard:  #4f5443;                       /* flat, no-blur brand shadow */
    --shadow-btn:   0 4px 4px rgba(0, 0, 0, .25);  /* button drop shadow (Figma) */
    --shadow-soft:  0 12px 30px -18px rgba(32, 37, 31, .45);

    /* ---- Radii ---- */
    --r-sm: 6px;
    --r:    12px;          /* buttons */
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* ---- Spacing scale ---- */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

    /* ---- Layout ---- */
    --content-max: 1200px;
    --gutter: clamp(16px, 4vw, 48px);

    /* ---- Typography (Interstate via Typekit; Overpass/system fallback) ---- */
    --font-sans: "interstate", "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* weights: Light 300 · Regular 400 · Bold 700 */
    --fs-h1:    clamp(2.25rem, 1.45rem + 3.3vw, 3.5rem);   /* 36 → 56 */
    --fs-h2-lg: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);    /* 28 → 40 */
    --fs-h2:    clamp(1.5rem, 1.3rem + .9vw, 2rem);        /* 24 → 32 */
    --fs-lead:  clamp(1.125rem, 1rem + .6vw, 1.375rem);    /* 18 → 22 */
    --fs-body:  1.0625rem;                                 /* 17 */
    --fs-nav:   1.125rem;                                  /* 18 */
    --fs-300:   .875rem;                                   /* 14 */
    --lh-tight: 1.04;
    --lh: 1.55;
    --tracking-tight: -.05em;

    /* ---- Motion ---- */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --dur: .25s;

    /* ---- Dot texture ---- */
    --dot:    rgba(50, 135, 63, .16);
    --dot-lg: rgba(50, 135, 63, .24);
}