/* ---------------------------------------------------------------------------
   layout.css — web-only layout tokens. Overlaid from hosting_shared/ alongside
   brand.css and served at /styles/layout.css.

   Deliberately separate from brand.css. Everything in brand.css names a colour
   or a font that exists in lib/core/utils/, and brand_css_parity_test.dart
   asserts exactly that — every hex in it must map to an AppColors constant.
   Container widths, section rhythm and radii have no Dart counterpart, because
   the app's layout is a phone and the web's is not. Putting them in brand.css
   would mean the parity test needs an exception list, and an invariant with an
   exception list stops being one.

   Values come from the Figma variables on the marketing frames
   (file 76n6btvsYu0t6AG5VZ353t): Container/container-large, Page
   Padding/padding-global, Section Padding/padding-section-{large,medium},
   Max Width/max-width-{medium,small}, Text Sizes/text-{small,regular,medium}.
   --------------------------------------------------------------------------- */

:root {
  /* Container and page rhythm.

     The four rhythm tokens come in pairs: a `*-max` that the width steps
     below own, and the value itself, which the height rule further down
     tapers *underneath* that ceiling. Splitting them is what lets the two
     axes be written once each instead of once per combination — the width
     steps say how wide the page is, the height rule says how much of the
     window one gap may eat, and neither has to restate the other. */
  --container-large: 1280px;
  --page-padding:    64px;

  --section-lg-max:   112px;
  --section-md-max:   80px;
  /* The gap between a section's title block and its content: 80 in the
     enrolment section, 64 in the comparison one. Named for the stack it sits
     in rather than for either section, because both use both. */
  --stack-gap-lg-max: 80px;
  --stack-gap-md-max: 64px;

  --section-pad-lg: var(--section-lg-max);
  --section-pad-md: var(--section-md-max);
  --stack-gap-lg:   var(--stack-gap-lg-max);
  --stack-gap-md:   var(--stack-gap-md-max);

  /* ── The nav pill ────────────────────────────────────────────────────────
     Figma: Container — node 1414:205352. 72px tall, floating 24px down.

     Here rather than in landing.css because two other things are measured
     from it and must not be allowed to drift: the scroll offset an in-page
     anchor lands at, and the floor of the hero's top padding. Both are
     `--nav-clear` plus air, so the pill can change size without either being
     recomputed by hand.

     The height is derived from the logo rather than stated: the sphere is the
     tallest thing in the bar and sits on 8px of padding, so 56 + 16 is the 72
     the frame reports. One number moves the pill. */
  --nav-logo: 56px;
  --nav-h:    calc(var(--nav-logo) + 16px);
  --nav-top:  24px;
  --nav-gap:  32px;
  --nav-pad-end: 32px;
  --nav-clear: calc(var(--nav-top) + var(--nav-h));

  /* Measure caps for running text */
  --max-width-md: 560px;
  --max-width-sm: 480px;

  /* Radii. --radius-card (20px) lives in brand.css and is the app's card
     radius; the marketing surfaces use their own, much larger, scale. */
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-24:   24px;
  --radius-32:   32px;
  --radius-40:   40px;
  --radius-80:   80px;
  --radius-full: 999px;

  /* Body text sizes. Display sizes are not tokens — they are per-role and set
     on the type classes, because each one also carries its own line-height. */
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
}

/* Gutters and section rhythm tighten before the container does, so the content
   keeps breathing room rather than the page edge collapsing onto the text. */
@media (max-width: 1279px) {
  :root {
    --page-padding:     40px;
    --section-lg-max:   96px;
    --section-md-max:   72px;
    --stack-gap-lg-max: 72px;
    --stack-gap-md-max: 56px;
  }
}

@media (max-width: 1023px) {
  :root {
    --page-padding:     32px;
    --section-lg-max:   80px;
    --section-md-max:   64px;
    --stack-gap-lg-max: 64px;
    --stack-gap-md-max: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-padding:     20px;
    --section-lg-max:   64px;
    --section-md-max:   48px;
    --stack-gap-lg-max: 48px;
    --stack-gap-md-max: 40px;
    --radius-40:        28px;
    --radius-80:        32px;

    /* The pill loses the wordmark's share of the bar to a toggle, so it is
       sized down here on width regardless of how tall the window is. */
    --nav-logo:    44px;
    --nav-gap:     12px;
    --nav-pad-end: 8px;
  }
}

/* ── The same rhythm, turned ninety degrees ────────────────────────────────
   A window is as likely to be short as it is to be narrow — a 1440x900 laptop
   shows about 760px of page once the browser's own chrome is paid for — and at
   that height 112px between two sections is a seventh of the window, so the
   page reads as mostly gaps.

   Continuous rather than stepped, which is the one thing this differs from the
   width scale in. A width step changes a *layout* — a row becomes a column —
   and has to happen all at once at a place somebody chose. Height changes
   nothing structural here; it only decides how much of a finite window a fixed
   gap is allowed to eat, and that is a ratio. So each token is its ceiling
   until a fraction of the window falls below it, and then it is that fraction,
   with a floor under it so a very short window still has rhythm rather than
   none.

   Gated on width, because below 1024 the marketing layout is already one
   stacked column and the width steps above own it. An ungated height rule
   would reach a phone held sideways and *raise* the padding the 767 step had
   just taken down — and would shrink a nav that is already at its small size
   for a different reason. */
@media (min-width: 1024px) {
  :root {
    --section-pad-lg: clamp(72px, 12vh,  var(--section-lg-max));
    --section-pad-md: clamp(56px,  9vh,  var(--section-md-max));
    --stack-gap-lg:   clamp(48px,  8.5vh, var(--stack-gap-lg-max));
    --stack-gap-md:   clamp(40px,  7vh,   var(--stack-gap-md-max));

    /* The pill is the one element on the page that is on screen the whole
       time, so it is the one whose size is felt at every scroll position
       rather than once. It gives way least of anything here — 56 down to 46
       across the whole range — because it also holds the logo, and a wordmark
       scaled below its drawn size stops being legible before it stops
       fitting.

       --nav-top keeps a floor of 16px rather than closing on zero: the gap
       above the pill is what makes it read as floating rather than as a
       docked toolbar, and it is the first thing a reader would notice
       missing. */
    --nav-logo:    clamp(46px, 6.6vh, 56px);
    --nav-top:     clamp(16px, 2.6vh, 24px);
    --nav-gap:     clamp(20px, 3.6vh, 32px);
    --nav-pad-end: clamp(20px, 3.6vh, 32px);
  }
}