/* Design tokens — the single source of truth for colour, type and layout metrics.
   Every page loads this first. Do not redeclare these values anywhere else.

   Where the four pages disagreed, index.html's values are authoritative. */

/* ── BREAKPOINTS ──
   Five steps, desktop-first, and no file may invent a sixth. The site ran on a
   single 900px query for a long time, which meant a 320px phone and an 899px
   tablet got identical layout while every iPad in landscape got the full
   desktop treatment. The bands below are named after what actually hits them:

     (none)         desktop        laptops, iPad Pro 12.9" landscape (1366)
     max-width:1279 tablet-land    iPad 1024 / 1133 / 1180 / 1194
     max-width:1023 tablet-port    iPad mini 744, iPad 820, iPad Pro 11" 834
     max-width:767  phone-land     phones rotated, small tablets
     max-width:479  phone          375 SE, 390 iPhone 14, 430 Pro Max

   A rotated phone is ~844px wide but only ~390px tall, so it lands in the
   tablet-port *width* band with almost no height. Anything that reserves
   vertical space also needs the short-landscape guard in base.css. */

:root {
  --black: rgb(0,0,0);
  --white: rgb(255,255,255);
  --gray: rgb(130,130,130);
  --light-gray: rgb(230,230,230);
  --bg-soft: rgb(247,247,247);

  --red-accent: rgb(190,54,54);
  --purple: rgb(124,92,191);
  --purple-soft: rgb(237,231,252);
  --blue: rgb(59,110,200);
  --blue-soft: rgb(227,236,252);

  --font-main: 'Inter', sans-serif;
  --font-soft: 'Nunito Sans', sans-serif;

  /* ── TYPE SCALE ──
     One fluid ramp, interpolating between a 375px and a 1440px viewport.
     Written as rem + vw rather than px + vw so a reader who has raised their
     browser's default font size still gets larger text; base.css keeps the
     root at 100% for the same reason.

     The nine clamp() calls that used to live scattered across the page files
     all floored at their minimum below ~1000px, so nothing actually scaled
     down on a phone — they only ever grew on desktop. These shrink. */
  --step--2: clamp(0.688rem, 0.094vw + 0.666rem, 0.75rem);   /* 11 → 12  micro labels */
  --step--1: clamp(0.75rem,  0.188vw + 0.706rem, 0.875rem);  /* 12 → 14  captions, meta */
  --step-0:  clamp(0.938rem, 0.094vw + 0.916rem, 1rem);      /* 15 → 16  body */
  --step-1:  clamp(1rem,     0.376vw + 0.912rem, 1.25rem);   /* 16 → 20  lead paragraph */
  --step-2:  clamp(1.188rem, 0.657vw + 1.034rem, 1.625rem);  /* 19 → 26  card / h3 */
  --step-3:  clamp(1.438rem, 1.127vw + 1.173rem, 2.188rem);  /* 23 → 35 */
  --step-4:  clamp(1.688rem, 1.878vw + 1.248rem, 2.938rem);  /* 27 → 47  section h2 */
  --step-5:  clamp(2rem,     3.005vw + 1.296rem, 4rem);      /* 32 → 64  page h1 */

  /* Form controls never go below 16px: iOS Safari zooms the viewport when a
     focused field is smaller, and the page visibly jumps on every tap. */
  --text-input: 16px;

  /* ── SPACING SCALE ──
     --pad is the page gutter. It was a two-step switch (80px, then 24px below
     900px); fluid means the gutter tracks the viewport instead of snapping. */
  --max: 1280px;
  --pad:      clamp(18px, 5.82vw - 3.8px, 80px);
  --gap-sec:  clamp(40px, 4.5vw + 23px, 80px);      /* vertical section rhythm */
  --gap-grid: clamp(14px, 0.94vw + 10.5px, 24px);   /* card grid gutters */
  --gap-col:  clamp(24px, 3.4vw + 11px, 60px);      /* two-column splits */
  --card-pad: clamp(18px, 1.7vw + 11.6px, 36px);    /* card interiors */

  /* Header height. nav.css hardcoded 104px and community.css hardcoded a
     matching top:104px on its sticky tab bar — a magic number coupling two
     files. Both read this now. */
  --nav-h: clamp(64px, 4.42vw + 47.4px, 104px);   /* 64 at 375, back to 104 by 1280 */

  /* WCAG 2.2 minimum target size. */
  --tap: 44px;

  /* ── MEDIA CAPS ──
     Media is sized against the viewport as well as its container, so an image
     or video can never take over a phone screen. svh (not vh) so a visible
     mobile browser chrome bar is accounted for. */
  --media-h-hero: clamp(200px, 46svh, 460px);
  --media-h-map:  clamp(240px, 44svh, 420px);
}