/* Design tokens: the only file with raw colors. */
:root {
  /* Brand palette, sampled from brand/logo-source.png */
  --c-green: #4ADC55;
  --c-green-deep: #1A7526;
  --c-ink: #151315;
  --c-ink-2: #2A272B;
  --c-paper: #F4F2EC;
  --c-paper-2: #E9E6DC;
  --c-yellow: #FCBE2A;
  --c-muted: #5E5A55;
  --c-muted-on-ink: #B9B4AC;
  --c-danger: #C2261B;
  --c-white: #FFFFFF;

  /* Surface roles, re-pointed by .section--* and .card--* */
  --surface: var(--c-paper);
  --on-surface: var(--c-ink);
  --fg-muted: var(--c-muted);
  --ring: var(--c-ink); /* focus ring follows the surface, not the element's own text color */

  /* Typography */
  --font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-label: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* label and number face: Onest with tabular figures */
  --fs-display: clamp(2.75rem, 8vw, 7.5rem);
  --fs-h2: clamp(1.75rem, 4.5vw, 4rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  /* Spacing — 4px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 160px;

  /* Shape */
  --r-sm: 12px; --r-md: 24px; --r-lg: 40px; --r-pill: 999px;

  /* Layout */
  --container: 1280px;
  --gutter: 20px;
  --header-h: calc(64px + env(safe-area-inset-top, 0px)); /* + notch (viewport-fit=cover) */

  /* Layers */
  --z-header: 10; --z-menu: 50; --z-consent: 100; --z-modal: 1000;

  /* Motion */
  --dur-fast: 150ms; --dur: 220ms; --dur-slow: 300ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) { :root { --gutter: 40px; --header-h: calc(72px + env(safe-area-inset-top, 0px)); } }
@media (min-width: 1280px) { :root { --gutter: 64px; } }