/* =============================================================================
   DESIGN TOKENS - 2026 refresh
   Source: Blake Chamberlain's XD design system (Typography / Color / Buttons).
   Extracted 2026-09-01. Plain CSS on purpose: there is no build step, so what
   is in this file is exactly what ships.

   COLORS ARE NOT HERE. They are emitted as --color-* custom properties from
   inc/colors.php so the CSS palette and the Gutenberg editor palette cannot
   drift apart. See happy_emit_color_custom_properties().

   Type tokens are the desktop values from the XD. Mobile floors are absent on
   purpose: Blake's direction is "mobile stays the same" as the current build,
   and the current build sets sizes per-element rather than from a scale.
   Inventing floors here would silently resize the live site.
   ========================================================================== */

:root {
  /* Families */
  --font-display: 'coachella', serif;   /* MADE Coachella Light */
  --font-text: 'Lato', sans-serif;

  /* Type scale - desktop, verbatim from the XD */
  --fs-h1: 50px;   --lh-h1: 70px;
  --fs-h2: 60px;   --lh-h2: 70px;
  --fs-h3: 38px;   --lh-h3: 48px;
  --fs-h4: 38px;   --lh-h4: 48px;
  --fs-h5: 32px;   --lh-h5: 42px;
  --fs-h6: 32px;   --lh-h6: 42px;
  --fs-h7: 24px;   --lh-h7: 34px;
  --fs-h8: 16px;   --lh-h8: 26px;
  /* Label leading is 1.21, not 1.71. Every 14px label in Blake's artboards
     measures a 17px line (17/14 = 1.21), derived from the line positions in her
     multi-line blocks since XD records the spacing itself as auto. Unitless so
     it holds through the fluid font-size ramp below 1280px. 1.71 was the
     theme's own default and made every wrapped label - team roles, stat
     sublabels, footer headings - sit far looser than drawn. */
  --fs-h9: 14px;   --lh-h9: 1.21;
  --fs-h10: 10px;  --lh-h10: 20px;
  --fs-body1: 18px; --lh-body1: 28px;
  --fs-body2: 16px; --lh-body2: 26px;
  --fs-body3: 14px; --lh-body3: 24px;

  /* XD stores letter-spacing in 1/1000 em, so its "150" means 0.15em. Confirmed
     from rangedStyles: charSpacing 150 appears exactly 3 times, on Lato Bold at
     16, 14 and 10px - H8, H9 and H10. */
  --track-caps: 0.15em;

  /* Mobile, measured from the mobile artboards rather than assumed.
     Body drops 18 -> 14. Coachella display collapses to a single 32px.
     Caps step down 14 -> 10. NOTE: 24px Lato is the heaviest size on BOTH
     desktop and mobile at near-identical character counts, so H7 does NOT
     shrink - do not scale it by reflex. */
  --fs-body1-sm: 14px;  --lh-body1-sm: 24px;
  --fs-display-sm: 32px; --lh-display-sm: 42px;
  --fs-caps-sm: 10px;   --lh-caps-sm: 20px;

  /* Layout. NOTE: the XD grid metadata claims 142px margins (1316 content),
     which is exactly what the theme already had - so the grid guide is stale.
     Measured against actual element positions on Homepage and About, Blake
     draws to ~110px margins, giving 1380 of content. That 64px is the "less
     white space" Aliza asked for. Case Studies still has some elements on the
     old 142 line, so expect a little inconsistency in her file. */
  --layout-width: 1600px;
  --layout-columns: 12;
  --layout-gutter: 16px;
  --layout-margin: 110px;
  /* 1380 was measured off the 1600 artboard, where it is correct. But it is an
     absolute cap, so every screen wider than ~1533 gets the leftover as margin:
     17.7% each side at 1920, 25.7% at 2560, against 6.9% in the mock. Raised so
     the cap only bites on genuinely wide displays. */
  --layout-content: 1680px;
  /* Vertical rhythm between blocks. The theme has no spacing scale - 783
     hardcoded px values across 24 partials - so this is the first shared knob.
     Blocks sat at 90-100px a side, giving ~190-200px between sections. The
     artboard's own gaps run 160-225, so this is not a miss against the mock:
     Blake framed it as a client preference ("they wanted less white space
     overall ... that will be an edit"). 68 gives ~136px gaps, about 30% tighter.
     Change it here, not per block. */
  --section-y: 68px;
  --section-y-sm: 44px;

  /* Shape */
  --radius-block: 15px;  /* content blocks */
  --radius-input: 4px;   /* forms and images */
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
}