/* Design tokens — Teow Tem Toh
   Source of truth: design.md §2 (colour), §3 (type), §5 (layout).
   Only the eight brand colours are primitives; everything else derives from them. */

:root {
  /* --- Colour primitives (design.md §2) --- */
  --green-900: #0b241c;
  --green-700: #143b2f;
  --cream-100: #f4efe1;
  --cream-200: #efe8d6;
  --sand-300: #e3d6bd;
  --gold-500: #e0a02e;
  --red-600: #cf3a2b;
  --red-700: #b62f22;

  /* Derived greens: same hue, chroma held close to green-700. */
  --green-800: #0f2c22;
  --green-600: #1d3b2e;

  /* --- Semantic colour --- */
  --surface-dark: var(--green-700);
  --surface-darkest: var(--green-800);
  --surface-light: var(--cream-100);
  --surface-muted: var(--cream-200);
  --surface-placeholder: var(--sand-300);

  --text-on-dark: var(--cream-100);
  --text-on-light: var(--green-700);
  /* Minimum alphas that still clear AA: 0.90 for cream on a red field,
     0.75 for green on cream-200 (the tighter of the two stocks). */
  --text-muted-dark: rgb(244 239 225 / 0.82);
  --text-muted-light: rgb(20 59 47 / 0.75);

  --accent: var(--gold-500);

  /* The action red splits by duty — DESIGN.md, The Contrast Gate Rule.
     red-600 against cream measures 4.26:1 in both directions, so it cannot
     carry text at body size. --action is every surface and label that holds
     text; --action-display is offsets and rules, which carry no text and so
     have no contrast duty. */
  --action: var(--red-700);
  --action-display: var(--red-600);

  --rule: var(--green-700);
  --rule-on-dark: rgb(244 239 225 / 0.3);

  /* --- Type (design.md §3) --- */
  --font-display: Anton, "Arial Narrow", sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-thai: "Noto Sans Thai", system-ui, sans-serif;

  --text-hero: clamp(50px, 8.6vw, 92px);
  --text-display: clamp(48px, 10vw, 116px);
  --text-h2: clamp(34px, 5.2vw, 54px);
  --text-h3: clamp(21px, 2.6vw, 26px);
  --text-body: clamp(14.5px, 1.5vw, 15.5px);
  --text-meta: 11.5px;

  --tracking-meta: 0.14em;
  --tracking-wide: 0.2em;
  --tracking-widest: 0.24em;

  /* --- Layout (design.md §5) --- */
  /* The sticky header's height, declared rather than guessed. main.css pins the
     header to it, so `100svh - var(--header-h)` is exact at every width instead
     of leaving a sliver of the next section above the fold. */
  --header-h: 64px;

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --space-section: clamp(44px, 6vw, 70px);
  --border-heavy: 3px;

  /* --- Screenprint depth: hard offsets, never blurred (design.md §1) --- */
  --shadow-card: 9px 9px 0 var(--green-700);
  --shadow-card-hover: 14px 15px 0 var(--green-700);
  --shadow-button: 5px 5px 0 var(--green-900);
  --shadow-button-hover: 8px 8px 0 var(--green-900);

  /* --- Motion --- */
  --duration-fast: 180ms;
  --duration-normal: 250ms;
  --duration-slow: 700ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Below 720px the nav wraps to a second row, so the declared height has to
   follow it — the hero subtracts this value and every in-page jump clears it. */
@media (max-width: 720px) {
  :root {
    --header-h: 74px;
  }
}