/* XGX design tokens — modelled on bendingspoons.com (measured Oct 2026 at 1440px).
   Change values here; everything else reads from these. */
:root {
  /* Colour */
  --black: #000000;
  --offblack: #252525;
  --card-dark: #1a1a1a;
  --white: #ffffff;
  --paper: #f8f8f8;
  --cream: #f1d9c4;          /* matches the box frames' background */
  --ink: #111111;            /* text on light */
  --muted: rgba(17, 17, 17, 0.55);
  --muted-dark: rgba(255, 255, 255, 0.55);
  --lime: #c7ff9f;           /* accent on dark (Bending Spoons' lime) */
  --leaf: #2f6b2c;           /* accent on light: banana-leaf green */
  --chili: #d8432c;          /* use sparingly */

  /* Pastel card tints (food) */
  --tint-rice: #fff4dc;
  --tint-chicken: #ffe2bf;
  --tint-scallion: #ddf3c8;

  /* Type families (all include Vietnamese glyphs) */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (desktop values, fluid down to mobile) */
  --fs-h1: clamp(48px, 6.95vw, 100px);    /* BS: 100px / lh 1 / -6% */
  --fs-h2: clamp(40px, 4.65vw, 67px);     /* BS: 67px / lh .93 / -4% */
  --fs-statement: clamp(28px, 3.6vw, 52px);
  --fs-stat: clamp(64px, 8.7vw, 125px);   /* BS: 125px with 185px serif digits */
  --fs-h3: clamp(24px, 2.2vw, 32px);
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-mono: 14px;

  --ls-h1: -0.06em;
  --ls-h2: -0.04em;
  --ls-statement: -0.03em;

  /* Shape and space */
  --radius-card: 32px;
  --radius-pill: 999px;
  --maxw: 1440px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --section-y: clamp(96px, 12vw, 200px);
  --nav-h: 81px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}