/* ProcureGCC tokens: one ground, one ink, no accent colour beyond ink (the brand palette from the concept) */
:root {
  --bg: #f2f1ee;
  --surface: #e7e5e0;
  --surface-2: #d9d7d1;
  --ink: #080808;
  --muted: #4a4946;
  --accent: #080808;
  --accent-ink: #f2f1ee;
  --accent-strong: #2a2a2a;
  --dark: #080808;
  --dark-ink: #f2f1ee;
  --dark-muted: #b9b7b1;
  --dark-surface: #1a1a19;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* five steps: small, body, lead, head (also the hero), poster; the statement sits between lead and head */
  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --step-statement: clamp(1.375rem, 0.9rem + 2vw, 2.25rem);
  --step-head: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem);
  --step-display: var(--step-head);
  --step-poster: clamp(4rem, 9vw, 9.5rem);

  --header-h: 4.5rem;
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 12vw, 14rem);
  --radius: 3px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
}
@media (max-width: 56em) {
  :root { --step-poster: 13vw; }
}