/*
 * Design tokens.
 *
 * Everything here was in globals.css `:root`, plus the four things the audit
 * found were a system in practice but had never been named: the mobile spacing
 * scale, the measure, the two hairlines, and the focus ring.
 *
 * What is deliberately NOT here: a radius scale, a shadow scale, a border
 * scale. The design has one radius (the CTA pill), zero shadows and one border
 * width. Naming scales the design does not follow would be a lie in a variable.
 */

:root {
  /* Sampled straight from the Figma mock. Also declared in theme.json, which
     is what the editor's colour picker offers — the two must stay in step. */
  --green: #195f43;
  --lime: #a3d775;
  --ink: #0a1f14;
  --white: #ffffff;
  --black: #000000;
  --charcoal: #212121;

  --font-sans: "Inter";

  /*
   * Type scale.
   *
   * In the Next app this covered the interior pages only, and the landing page
   * and footer kept their own hard-coded clamp()s — six unmanaged display
   * sizes and four small ones, four of which differed from a token in the
   * third decimal of a vw. Those four are now on the tokens below; the landing
   * page's own display sizes stay as they are, because they are a composition
   * measured off a frame rather than a scale.
   */
  --text-page-title: clamp(2.25rem, 5.1vw, 8.1rem);
  --text-section-title: clamp(2.25rem, 5vw, 5.5rem);
  --text-module-title: clamp(1.375rem, 2.3vw, 2.75rem);
  /* Flat, like --text-lead and --text-body: a set size, not one that tracks
     the viewport. This is the intermediate tier — card titles, rate names and
     the prices beside them — sitting between the 28px module title and the
     14px labels. Was clamp(1.0625rem, 1.35vw, 1.5rem), which resolved to
     20.4px at 1512 and kept climbing on a wide display. */
  --text-item-title: 24px;
  /* Flat, not fluid: set sizes chosen for reading, not for filling a viewport. */
  --text-lead: 24px;
  --text-body: 14px;
  /* One step up from the body, for passages that carry a page rather than
     annotate a module — the prose sections. 14px is right for a card body or a
     list item beside a heading; across a 60% column of continuous reading it
     is too small. */
  --text-body-l: 18px;
  --text-label: clamp(0.75rem, 1.01vw, 1.26rem);

  /* The landing page's own display steps, named at last so they are countable
     rather than scattered across three stylesheets. */
  --text-hero-title: clamp(2.25rem, 6.45vw, 8.5rem);
  --text-feature-title: clamp(2rem, 4.61vw, 5.75rem);
  --text-manifesto: clamp(1.75rem, 4vw, 5rem);
  --text-feature-body: clamp(0.9375rem, 1.105vw, 1.38rem);

  --gutter: clamp(1.25rem, 4.2vw, 5.25rem);
  /* Display type: the footer heading and the marquee. Capped by height too, or
     a wide short screen pushes everything below it off the fold. */
  --display-size: min(clamp(2.5rem, 8.16vw, 9rem), 13svh);

  /*
   * The mobile spacing scale.
   *
   * Below 60rem the modules were already using one — 12 · 20 · 24 · 32 · 40 ·
   * 48 · 66 · 80 · 100 · 160 — consistently, and it had simply never been
   * named. The desktop clamp()s are intentional per-module rhythm and are left
   * alone. Mirrored in theme.json's spacingSizes.
   */
  --space-1: 12px;
  --space-2: 20px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 66px;
  --space-8: 80px;
  --space-9: 100px;
  --space-10: 160px;

  /* One measure. It replaced 44rem (PageHeader lede) and 46rem (CardGrid
     lede), which were the same idea written twice. 68rem stays as its own
     token: it is the page-title column, not a reading measure. */
  --measure: 46rem;
  --measure-wide: 68rem;

  /* Two hairlines, not three. Syllabus' module borders were 1px currentColor
     at full strength for the same job the card rules do at 0.2. */
  --rule-accent: 2px;
  --rule-hairline-color: currentColor;
  --rule-hairline-opacity: 0.2;

  /* Lime on lime is invisible; the ground override lives in ground.css. */
  --focus-ring: var(--lime);
}

/*
 * One place to restate the scale for narrow screens, instead of a font-size
 * override at the bottom of every module's stylesheet.
 */
@media (max-width: 60rem) {
  :root {
    /*
     * Fluid on narrow screens too, tracking the viewport rather than sitting
     * at a flat 38px — which read as far too big on a phone. Each clamp tops
     * out at the old flat size, so a tablet near 60rem looks as it did; a
     * 375px phone lands at ~26px for display titles.
     *
     * The hero title is on the same step now. It used to keep its desktop
     * clamp, whose 36px floor was the size that looked too big.
     */
    --text-display-mobile: clamp(1.5rem, 7vw, 2.375rem);
    --text-hero-title: var(--text-display-mobile);
    --text-page-title: var(--text-display-mobile);
    --text-section-title: var(--text-display-mobile);
    --text-feature-title: var(--text-display-mobile);
    --text-manifesto: clamp(1.375rem, 6.4vw, 1.75rem);
    --text-module-title: clamp(1.25rem, 6vw, 1.75rem);
    --text-item-title: clamp(1.0625rem, 4.8vw, 1.25rem);
    --text-lead: clamp(1.0625rem, 4.8vw, 1.25rem);
  }
}