/* ==========================================================================
   TOKENS — colours, type scale, spacing, motion
   Values mirror the reference site's Framer design tokens 1:1.
   ========================================================================== */

:root {
  /* ---- Colour -------------------------------------------------------- */
  --bg:        #141517;
  --bg-raised: #1b1c1f;
  --white:     #ffffff;
  --white-70:  rgba(255, 255, 255, .70);
  --white-50:  rgba(255, 255, 255, .50);
  --white-30:  rgba(255, 255, 255, .30);
  --line:      rgba(255, 255, 255, .15);
  --line-soft: rgba(255, 255, 255, .08);
  --overlay:   rgba(0, 0, 0, .55);
  --black:     #000000;

  /* Accent is deliberately restrained — the reference has no colour accent.
     Used only for focus rings and the "live" dot. */
  --accent:    #d8ff3e;

  /* ---- Type families -------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  /* OpenType features used across the reference site */
  --font-features: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;

  /* ---- Type scale · DESKTOP (>= 1200px) ------------------------------- */
  --fs-h1:    80px;   /* hero statement            weight 400  ls -.04em */
  --fs-h2:    97px;   /* section / sticky card     weight 700  ls -.04em */
  --fs-h3:    48px;
  --fs-h4:    40px;   /* card titles               weight 600  ls -.03em */
  --fs-h5:    26px;   /* nav links                 weight 600  ls -.03em */
  --fs-h6:    20px;   /* card labels               weight 400  ls -.01em */
  --fs-body:  18px;
  --fs-small: 15px;
  --fs-micro: 13px;
  --fs-cta:   80px;   /* "Let's work together"     weight 500  ls -.04em */
  --fs-logo:  70px;   /* wordmark in the nav       weight 700  ls -.04em */
  --fs-stat:  clamp(44px, 6.5vw, 104px);

  /* ---- Spacing --------------------------------------------------------- */
  --pad-x:        16px;
  --container:    1600px;
  --grid-gap-col: 13px;
  --grid-gap-row: 50px;
  --section-gap:  100px;

  /* ---- Sticky card stack offsets --------------------------------------- */
  --stack-1: 0px;
  --stack-2: 50px;
  --stack-3: 100px;
  --stack-4: 150px;

  /* ---- Motion ---------------------------------------------------------- */
  /* Approximates the reference's spring(bounce .1) without a physics lib. */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-reveal:  1.2s;
  --dur-fast:    .35s;
  --stagger:     30ms;   /* per-letter delay on card titles */

  --nav-h: 92px;
}

/* ---- Type scale · TABLET (810–1199px) ---------------------------------- */
@media (max-width: 1199.98px) {
  :root {
    --fs-h1:   64px;
    --fs-h2:   48px;
    --fs-h3:   38px;
    --fs-h4:   32px;
    --fs-cta:  64px;
    --fs-logo: 26px;
    --grid-gap-row: 70px;
    --section-gap:  80px;
    --nav-h: 64px;
  }
}

/* ---- Type scale · MOBILE (<= 809px) ------------------------------------ */
@media (max-width: 809.98px) {
  :root {
    --fs-h1:   40px;
    --fs-h2:   40px;
    --fs-h3:   30px;
    --fs-h4:   26px;
    --fs-h5:   22px;
    --fs-cta:  50px;
    --fs-logo: 26px;
    --pad-x:   16px;
    --grid-gap-row: 45px;
    --section-gap:  64px;
    --stack-1: 0px;
    --stack-2: 30px;
    --stack-3: 60px;
    --stack-4: 90px;
    --nav-h: 60px;
  }
}