/* ============================================================
   3Peaks design tokens
   Codified from the live, tested marketing.css. Values are not
   invented: every colour, radius and shadow below appears on
   marketing.3peaks.dev today. What is new here is only the
   *naming* and the filling of gaps the live sheet left implicit
   (spacing, a type scale).
   Anything added rather than derived is marked NEW.
   ============================================================ */

:root {
  /* ---- ink ---------------------------------------------- */
  --ink:            #1b1f1c;   /* body text, headings          */
  --muted:          #5c625e;   /* secondary text               */
  --faint:          #9aa19c;   /* tertiary, labels, meta       */
  --hairline:       #e9eae8;   /* every border on the site     */
  --logo-grey:      #a9b0aa;   /* NEW name. logo wall          */
  --marquee-grey:   #c3c8c4;   /* NEW name. marquee text       */

  /* ---- ground ------------------------------------------- */
  --bg:             #fbfbfa;   /* page                         */
  --card:           #ffffff;   /* raised surface               */

  /* ---- green ramp --------------------------------------- */
  /* Live uses these six inside gradients. Naming them is the
     single biggest gain of codifying: the dark surfaces stop
     being magic numbers buried in radial-gradient().          */
  --green-400:      #37906a;   /* closing panel, lightest      */
  --green-500:      #2a7a54;   /* comparison card top          */
  --accent:         #1e5b3f;   /* THE brand green              */
  --green-700:      #123a29;   /* closing panel floor          */
  --green-800:      #123526;   /* comparison card mid          */
  --green-900:      #0c281c;   /* comparison card floor        */
  --accent-soft:    #e8f1ec;   /* tint                         */
  --wire:           #d9e0da;   /* diagram strokes              */
  --wa:             #1fa855;   /* WhatsApp, brand-locked       */

  /* ---- the two dark surfaces, as tokens not gradients ---- */
  --surface-deep:   radial-gradient(120% 120% at 20% 0%,
                      var(--green-500) 0%, var(--green-800) 58%, var(--green-900) 100%);
  --surface-invite: radial-gradient(130% 160% at 18% 8%,
                      var(--green-400) 0%, var(--accent) 46%, var(--green-700) 100%);

  /* ---- type --------------------------------------------- */
  /* Overridden per language. Latin first so numbers and Latin
     words inside Hebrew resolve to the Latin face unmarked.    */
  --head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  /* Scale. Live uses clamp() ad hoc; these are those same
     clamps, named. NEW as tokens, identical as values.        */
  --fs-display:  clamp(40px, 6.2vw, 78px);   /* hero h1        */
  --fs-h1:       clamp(30px, 4.4vw, 54px);   /* closing panel  */
  --fs-h2:       clamp(28px, 3.6vw, 44px);   /* section head   */
  --fs-h3:       clamp(24px, 3vw,   34px);   /* sub-section    */
  --fs-stat:     clamp(26px, 3vw,   38px);   /* big numbers    */
  --fs-quote:    clamp(20px, 2.2vw, 27px);   /* word reveal    */
  --fs-lead:     clamp(16px, 1.6vw, 19.5px); /* hero sub       */
  --fs-card-h:   21px;
  --fs-body:     16.5px;
  --fs-sm:       15px;
  --fs-xs:       14.5px;
  --fs-eyebrow:  12px;

  --lh-tight:    1.06;
  --lh-head:     1.2;
  --lh-body:     1.6;
  --lh-prose:    1.65;

  --ls-head:     -0.02em;
  --ls-eyebrow:  0.14em;

  --w-regular:   400;
  --w-medium:    600;
  --w-bold:      700;

  /* ---- space -------------------------------------------- */
  /* NEW. Live hard-codes padding per section; these are the
     values it actually uses, deduplicated to a 4px grid.      */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 22px;   --s-6: 26px;   --s-7: 34px;  --s-8: 44px;
  --s-9: 60px;   --s-10: 84px;  --s-11: 110px; --s-12: 130px;

  /* ---- shape -------------------------------------------- */
  --radius-sm:   12px;
  --radius-md:   18px;   /* trust card, sky card             */
  --radius:      22px;   /* the default                      */
  --radius-lg:   26px;   /* comparison card                  */
  --radius-xl:   28px;   /* full-bleed panels                */
  --radius-pill: 999px;

  /* ---- depth -------------------------------------------- */
  --shadow-card:  0 10px 34px rgba(15, 25, 18, .05);
  --shadow-nav:   0 8px 30px rgba(15, 25, 18, .08);
  --shadow-chip:  0 10px 24px rgba(15, 25, 18, .16);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, .22);
  --shadow-accent: 0 8px 20px rgba(30, 91, 63, .3);

  /* ---- layout ------------------------------------------- */
  --wrap:    1216px;
  --wrap-nav: 1148px;
  --measure:  760px;   /* prose max-width                     */

  /* ---- stat labels: DECIDED 2026-08-18 in the contrast lab -- */
  --stat-label-color:  var(--accent);
  --stat-label-size:   var(--fs-sm);
  --stat-label-weight: 600;

  /* ---- sky report card: DECIDED 2026-08-18 in the lab ------- */
  --sky-card-w:   620px;
  --sky-card-fs:  17px;
  --sky-card-pad: 28px 32px;

  /* ---- eyebrows: DECIDED 2026-08-18 in the lab -------------- */
  --eyebrow-color:   var(--accent);
  --eyebrow-size-he: 17.5px;

  /* ---- motion ------------------------------------------- */
  --ease:      cubic-bezier(.22, .9, .3, 1.08);
  --dur-fast:  .2s;
  --dur:       .25s;
  --dur-slow:  .7s;
}

/* Hebrew overrides only the type. Everything else is shared. */
:root[lang="he"] {
  /* DECIDED 2026-08-18 in the font lab: Rubik for both.
     Differentiation comes from weight (800 vs 400), not family.
     Previous live pairing was Suez One + Heebo. */
  --head: "Rubik", "Inter", system-ui, sans-serif;
  --body: "Rubik", "Inter", system-ui, sans-serif;
  --w-bold: 800;   /* single-family systems need a louder heading weight */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}