/* ===========================================================
   Layout tokens — spacing, radius, motion, z-index.
   Outside the scope of the Typography Guideline (v1.2 covers type +
   colour only), so these live in their own file rather than inside
   src/styles/tokens.css.
   =========================================================== */

:root {
  /* ---- Spacing / layout ------------------------------------ */
  --container: 1440px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.875rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl: clamp(3.5rem, 6vw, 6.5rem);
  --space-2xl: clamp(5rem, 9vw, 9.5rem);
  --space-section: 96px;

  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Motion -------------------------------------------------- */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.4s;
  --dur-reveal: 1.1s;
  --dur-slow: 1.6s;

  /* ---- Z-index scale ------------------------------------------ */
  --z-nav: 210;
  --z-overlay: 200;
  --z-cursor: 300;

  /* ---- v1.2 §2.2 semantic gaps — new code uses these, not the legacy
     --space-* steps above. --space-xs/xl/2xl collide with v1.2's own
     names at different values, so this block adds only the collision-free
     v1.2 names. R2 authors against the --gap- and --pad- aliases; the legacy
     --space-* steps survive only for the carried base/layout primitives
     and must not appear in new R2 CSS. ---- */
  --gap-inline:        12px;
  --gap-tight:         16px;
  --gap-block:         24px;
  --gap-heading:       64px;
  --gap-component:     64px;
  --gap-section:      200px;
  --gap-section-major:280px;

  /* ---- THE ARRIVAL CLEARANCE — ONE SITE (P3 / H4-h, 3 Aug) ----

     Every arrival on all fifty-eight pages clears the fixed chrome by this.
     It used to be spelled out as the same calc() SIXTEEN times across eight
     stylesheets — eight base statements and eight ≤1023 restatements — and
     that duplication is exactly how H4-c's fault reached every page at once
     and why repairing it had to touch eight files.

     🔴 It is defined HERE, beside --gap-component and --gap-heading, because
     it is MADE of them and therefore inherits THEIR breakpoints. That is the
     whole of H4-c: keyed at 1024 while the gaps step at 1023, the
     restatement that exists to give the narrower band MORE clearance
     delivered 104 against desktop's 128. Co-location is the guard — move a
     gap token's breakpoint and this token is visibly in the same block.

     H4-h(A) proposed deriving this from the PLATE instead
     (--logo-size-* + --logo-clear-space-*). MEASURED AND REFUSED — see
     H5-c. The plate shrinks faster than the arrival should: plate+clear is
     131.7 at 1440 but 117.4 at 1023 and 106.0 at 768, which reinstates the
     narrower-band-gets-less asymmetry H4-c had just repaired. The clearance
     has two jobs — clear the plate, and give every page one arrival — and
     only the first is plate-shaped. So the de-duplication is taken and the
     re-basing is not. */
  /* 🔴 +2 CLEAR SPACES, Session XXXV (Mahesh, on the rendered arrivals).
     Measured first: /about, /careers, /contact and /projects sat 18.3px
     under the plate's bottom edge and the RECORD page — the one he
     photographed — sat 25.3px. The tight pages were the plain ones, not
     the record; the record is simply the only layout whose text also runs
     under the plate horizontally, which is why it is where the eye catches
     it. Now 68.3 and 75.3.

     🔴 THIS IS NOT THE RE-BASING REFUSED ABOVE, and the difference is the
     whole reason it may ship. That one DERIVED the clearance from the
     plate, which made it 131.7 at 1440 but 117.4 at 1023 and 106.0 at 768
     — narrower band, less arrival, the asymmetry H4-c had just repaired.
     This ADDS A CONSTANT to the existing expression, so every band keeps
     the step it already had and nothing is re-derived. The refusal stands
     exactly as written; it is about a different move. */
  --arrival-clearance: calc(
    var(--gap-component) + var(--gap-heading) + var(--logo-clear-space-desktop) * 2
  );

  /* ---- v1.2 §2.4 layout frame ----
     1120px is the locked value. Ravi's v1 branch carries 1250px from a
     client request (commit b8ea7a7, "1250px content width, centered
     hero") — that request contradicts v1.2 §2.4 and §9 rule 1, and it was
     made against the v1 track. It does not cross into R2. If ProArc
     restates the request at the R2 walkthrough it gets decided on the
     record and the guideline is revised; it does not arrive by import. */
  --container-max:  1120px;
  --gutter-desktop:   80px;
  --gutter-tablet:    40px;
  --gutter-mobile:    20px;

  /* ---- v1.2 §2.6 component padding ---- */
  --pad-card:          40px;
  --pad-overlay-panel: 48px;
  --pad-table-row:     12px;
}

/* v1.2 §2.3 responsive spacing — same breakpoints as tokens.css's own
   tablet/mobile steps. Only the --gap- and --pad- aliases move; the
   legacy --space-* scale above is untouched in this pass. */
@media (max-width: 1023px) {
  :root {
    --gap-section:       144px;
    --gap-section-major: 200px;
    --gap-heading:        40px;
    --gap-component:      40px;
    --pad-card:           32px;
    --pad-overlay-panel:  32px;

    /* The restatement, and BOTH halves of it are load-bearing (H4-c): 1023
       rather than 1024, because the two gaps it is made of step here; and
       `* 2` rather than one --gap-block, because a single one leaves the
       narrow band SHORT of desktop. It carries to ≤767 unrestated — the
       mobile block below moves --gap-heading to 24, so this same expression
       resolves to 112 there without a third statement. */
    --arrival-clearance: calc(
      var(--gap-component) + var(--gap-heading) + var(--gap-block) * 2 +
      var(--logo-clear-space) * 2
    );
  }
}

@media (max-width: 767px) {
  :root {
    --gap-section:        96px;
    --gap-section-major: 144px;
    --gap-heading:        24px;
    --gap-component:      40px;
    --pad-card:           24px;
    --pad-overlay-panel:  24px;
  }
}