/* Design tokens: every colour, type size, spacing, timing and recurring dimension of the site.
   Change a value here and it changes everywhere. Other CSS files only reference these.
   Breakpoints cannot be custom properties (CSS doesn't allow var() in media queries); the site
   uses 30rem, 36rem, 40rem, 48rem, 60rem and 64rem consistently. */

:root {
  /* ---------- colour ---------- */
  /* warm playfield black, cream of the bumper caps, one Swiss red as the signal */
  --color-paper: oklch(16.5% 0.012 55);
  --color-paper-2: oklch(20.5% 0.014 55);
  --color-paper-3: oklch(25% 0.016 55);
  --color-ink: oklch(93.5% 0.03 85);
  --color-ink-2: oklch(85% 0.032 82);
  --color-muted: oklch(72% 0.026 75);
  --color-rule: oklch(32% 0.016 60);
  /* the logo's ochre: the second voice after red, for labels, small marks and sparks (deep version on cream) */
  --color-ochre: oklch(64.5% 0.14 62);
  --color-ochre-deep: oklch(47% 0.11 58);
  --color-accent: oklch(57% 0.2 27);
  --color-accent-2: oklch(51% 0.19 27);
  --color-accent-ink: oklch(97% 0.015 85);
  --color-focus: oklch(61% 0.2 27);
  /* the cream band (fact band, statement): cream paper, deep red type, brown body */
  --color-cream: oklch(93% 0.03 85);
  --color-cream-2: oklch(88% 0.034 82);
  --color-cream-red: oklch(50% 0.19 27);
  --color-cream-ink: oklch(27% 0.025 50);
  --color-cream-rule: oklch(80% 0.035 78);
  /* key visual parts (see art.css) */
  --kv-shadow: oklch(11% 0.01 50);
  --kv-dark: oklch(19% 0.012 50);
  --kv-cream-3: oklch(76% 0.04 78);
  --kv-cream-hi: oklch(98.5% 0.01 90);
  --kv-red-2: oklch(40% 0.15 27);
  --kv-red-hi: oklch(66% 0.18 30);
  --kv-steel-1: oklch(97% 0.006 85);
  --kv-steel-2: oklch(76% 0.012 80);
  --kv-steel-3: oklch(46% 0.012 70);
  --kv-panel: oklch(23% 0.016 55);
  /* theme-color in layout.php (#140f0b) is --color-paper in hex; meta tags can't read CSS */

  /* ---------- type: five styles and nothing else ---------- */
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --type-display: clamp(3rem, min(14.5vw, 19svh), 20rem);     /* the hero name only; 3rem fits "SWISS PINBALL" at 320px */
  --type-headline: clamp(2.25rem, 3.4vw + 0.5rem, 3.75rem);   /* section titles */
  --type-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem);  /* card titles, fact values */
  --type-body: 1.0625rem;
  --type-small: 0.875rem;                                      /* language switch, footer, hints */
  --leading-body: 1.55;
  --leading-tight: 1.1;
  --leading-snug: 1.2;        /* multi-line bold values (fact band) */
  --wdth-wide: 125%;          /* Archivo's wide cut, used for every --type-title text */

  /* ---------- spacing ---------- */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --section-gap-s: 120px;
  --section-gap: 144px;
  --gap-columns: 32px;
  --gutter: 64px;
  --container: 1360px;
  --measure: 65ch;            /* longest comfortable line for running text */

  /* ---------- components ---------- */
  --nav-h: 72px;
  --logo-h: 52px;             /* logo height in the header bar */
  --logo-arrival-scale: 2.3;  /* how much larger the logo hangs over the hero before scrolling */
  --tap-min: 44px;            /* smallest touch target */
  --btn-h: 48px;
  --icon-size: 22px;          /* icons in round buttons (photo viewer) */
  --radius-card: 6px;
  --radius-pill: 999px;
  --crest-w: 320px;           /* bumper in the fact band */
  --crest-w-small: 220px;     /* the same, on small screens */
  --table-max-w: 460px;       /* pinball table on small screens */
  --flip-btn: 68px;           /* the round flipper buttons below the pinball table */
  --legal-w: 760px;

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --reveal-shift: 20px;
  --reveal-stagger: 80ms;

  /* ---------- layers ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky-nav: 300;
  --z-tooltip: 600;
}

/* smaller screens: tighter gutters and section gaps */
@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --gap-columns: 16px; }
}
@media (max-width: 30rem) {
  :root { --nav-h: 64px; --logo-h: 44px; --logo-arrival-scale: 1.6; }
}