/* ── Design tokens, fonts, reset ──────────────────────────────────────────
   Load first. Everything downstream references these custom properties. */

/* App fonts — same FK families the Maypop app ships */
@font-face {
  font-family: 'FK Grotesk';
  src: url('../fonts/FKGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('../fonts/FKGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk SemiMono';
  src: url('../fonts/FKGroteskSemiMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-pad: clamp(24px, 7vw, 72px);
  --heading: oklch(0.93 0.004 265);

  /* Type scale — 14px readable floor, 16px body, then a modular climb.
     Nothing reading-sized goes below --text-1 (avatar monograms aside). */
  --text-1: 14px;
  --text-2: 16px;
  --text-3: 18.75px;
  --text-4: 23.44px;
  --text-5: 29.3px;
  --text-6: 36.62px;
  --text-7: 45.78px;
  --text-8: 57.22px;

  /* Normalized reading base — every bit of copy that sits *below a title* shares
     this one size: the hero subtitle, each section subtitle, and the FAQ (both
     question and answer). A step up from the --text-2 body scale so the site's
     primary voice reads large and confident. Cards keep the smaller --text-2
     base so they stay clearly secondary to this reading copy.
     Fluid: --text-3 (18.75) on phones ≤ ~420, full 20.75 from ~640 up — one
     continuous ramp, no breakpoint snap. */
  --fs-reading: clamp(var(--text-3), calc(15px + 0.9vw), calc(var(--text-3) + 2px));

  /* The one title size for the whole site — hero h1 and every section h2 share
     it, so there's a single headline scale everywhere. One monotonic ramp:
     32px flat on phones (≤ ~585), then fluid up to 46 by ~1270 — the size only
     ever grows with the viewport, so there's no snap anywhere on the way down. */
  --fs-title: clamp(32px, calc(20px + 2.05vw), 46px);

  /* Fonts. --font (FK Grotesk) is the default for ALL reading text: headings,
     body, captions, labels, names, nav, links. --font-mono (FK Grotesk
     SemiMono) is reserved for UI chrome only — button/control labels, the
     footer meta (column headers + legal), and the placeholder "preview"
     watermark. Never body copy or avatars. */
  --font: 'FK Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'FK Grotesk SemiMono', ui-monospace, SFMono-Regular, 'Menlo', monospace;

  /* App design tokens (dark theme) */
  --foreground: oklch(0.98 0 0);
  --app-background: oklch(0.139 0.004 265);
  --overlay-5:  rgba(255,255,255, 0.05);
  --overlay-7:  rgba(255,255,255, 0.07);
  --overlay-10: rgba(255,255,255, 0.10);
  --overlay-20: rgba(255,255,255, 0.20);
  --overlay-40: rgba(255,255,255, 0.40);
  --shadow-sm: 0 1px 2px -1px hsl(0 0% 0% / 0.34), 0 3px 6px -2px hsl(0 0% 0% / 0.30);
  --shadow-md: 0 2px 4px -2px hsl(0 0% 0% / 0.38), 0 8px 18px -4px hsl(0 0% 0% / 0.40);

  /* Page background + tinted-neutral text tiers (subtle cool tint) */
  --bg: #060606;
  --bg-rgb: 6, 6, 6; /* channels for rgba() page-bg tints/scrims */
  --text-primary:   oklch(0.95 0.004 265);
  --text-secondary: oklch(0.72 0.006 265);
  --text-muted:     oklch(0.72 0.006 265);
  --text-tertiary:  oklch(0.56 0.006 265);
  --text-dim:       oklch(0.46 0.006 265);

  /* Opaque surfaces — panels/cards use these (not the translucent overlays)
     so the fixed dot-field never shows through. Tuned to match how
     overlay-5/7 read over the near-black page background. */
  --surface-1: oklch(0.17 0.004 265);
  --surface-2: oklch(0.205 0.005 265);

  /* Spacing scale (4px base) — everything spatial references these */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Layout rhythm */
  --container-max: 1120px;
  --container-narrow: 720px;
  /* Floor = the phone override's cap (base.css) so the two curves meet exactly
     at the 640px boundary — no gap snap while resizing across it. */
  --section-gap: clamp(128px, 13vw, 240px);
  /* Radius scale — one proportional ladder (+4px steps) shared by every element
     on the site, so all corners read as the same family. Nested elements stay
     concentric by adding the inset to the inner radius (e.g. the gallery card is
     --radius-lg + its 8px media inset). sm: pills/buttons/rows/thumbs ·
     card: cards/media · lg: large panels/gallery/mood cards. */
  --radius-sm: 14px;
  --radius-card: 20px;
  --radius-lg: 28px;
  /* Fluid nav bar: 68px on phones (≤ ~425), full 84px from ~525 up — keeps the
     chrome proportionate to the screen it sits on. Everything that clears the
     nav (hero pull-under, anchor scroll-padding) references this. */
  --nav-h: clamp(68px, 16vw, 84px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }