/* Fital LP - design tokens.
   Every value here is read straight off the Figma file. Nothing is invented.
   Rules baked in on purpose:
   - no font-size below 22px, in EITHER breakpoint
   - no opacity below 0.78 anywhere (faded states are done with COLOR, not alpha) */

:root{
  /* ---------- color ---------- */
  --navy:#0b1020;
  --cream:#f1f0eb;
  --ink:#141414;
  --sky:#7994cb;
  --sky-deep:#40589b;
  --sky-tint:#e7ecf6;
  --white:#ffffff;

  --body:#38383d;          /* body copy on cream */
  --muted:#6b6b6b;         /* captions, micro copy */
  --line:#ccc9c4;          /* hairlines on cream */
  --card-off:#f6f5f3;      /* card surface on cream */
  --placeholder:#dad8d3;   /* image placeholder on cream */
  --placeholder-dark:#292e3d;

  --cream-80:#ccccc9;      /* body copy on navy */
  --grey:#b8b8b5;          /* micro copy on navy */
  --quote-behind:#21283e;  /* pull-quote watermark - dark navy, NOT navy at low alpha */
  --footer-divider:#292e3d;

  --red:#b4382c;
  --red-tint:#faf0ee;
  --red-line:#e7c4bd;

  /* ---------- type ---------- */
  --f-head:Rubik,system-ui,sans-serif;
  --f-body:Assistant,system-ui,sans-serif;

  /* desktop scale - size / line-height */
  --h1:60px;      --h1-lh:72px;
  --h2:52px;      --h2-lh:64px;
  --sub:34px;     --sub-lh:44px;
  --sub-lg:46px;  --sub-lg-lh:60px;
  --text:27px;    --text-lh:42px;
  --text-sm:26px; --text-sm-lh:40px;
  --micro:23px;   --micro-lh:32px;

  /* ---------- layout ---------- */
  --page:1280px;
  --content:1080px;
  --margin:100px;

  --sec-y:80px;       /* padding-top = padding-bottom on every section but the hero */
  --sec-cta:64px;     /* gap from section body to its CTA */

  --r-media:20px;
  --r-card:24px;
  --r-pill:999px;

  /* ---------- motion ----------
     Deliberately tiny. The page is ~21,000px tall; the brief is that scrolling
     must stay continuous so people actually reach the form. One reveal, no more. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* expo-out - נחיתה רכה, לכניסות */
  --dur:.45s;
}

@media (max-width:767px){
  :root{
    --h1:38px;      --h1-lh:46px;
    --h2:36px;      --h2-lh:46px;
    --sub:25px;     --sub-lh:33px;
    --sub-lg:32px;  --sub-lg-lh:42px;
    --text:24px;    --text-lh:38px;
    --text-sm:22px; --text-sm-lh:32px;
    --micro:22px;   --micro-lh:30px;

    --page:390px;
    --content:342px;
    --margin:24px;

    --sec-y:60px;
    --sec-cta:48px;
  }
}

@media (prefers-reduced-motion:reduce){
  :root{--dur:.001s;}
}