/* Zone 5 Moto — design tokens. Every colour, size and timing on the site comes from here.
   Palette is lifted from the logo: black, white, the silver mountains, MOTO grey and the heartbeat red. */
:root {
  /* Black canvas */
  --black-950: #050505;
  --black-900: #0a0a0a;   /* page */
  --black-850: #101012;
  --black-800: #141416;   /* panels */
  --black-700: #1d1d20;

  /* Red: the heartbeat. Fills, hairlines, accents and display text >= 20px.
     Small red text uses --red-400, which passes AA on every black here. Text on a red fill is black. */
  --red-500: #fb0002;
  --red-600: #d40002;
  --red-400: #ff4d4d;
  --red-soft: rgba(251, 0, 2, 0.34);
  --red-glow: rgba(251, 0, 2, 0.16);

  /* Whites and silvers from the mountains, greys from MOTO */
  --white: #fbfbfb;
  --silver-200: #e3e3e7;
  --silver-300: #cdcdd1;   /* muted text on black */
  --grey-500: #a2a2a5;
  --grey-600: #89898d;     /* eyebrows, labels */

  /* Light chapter */
  --paper: #f3f3f5;
  --paper-2: #e8e8ec;
  --ink: #0a0a0a;
  --ink-muted: #4b4b52;

  /* Hairlines */
  --line-dark: rgba(251, 251, 251, 0.12);
  --line-dark-strong: rgba(251, 251, 251, 0.24);
  --line-light: rgba(10, 10, 10, 0.14);
  --line-light-strong: rgba(10, 10, 10, 0.3);

  /* Type */
  --font-display: 'Chakra Petch', 'Display Fallback', 'Arial Narrow', Arial, sans-serif;
  --font-sans: 'Barlow', 'Sans Fallback', 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(3rem, 0.9rem + 7.4vw, 8.25rem);
  --fs-h2: clamp(2.25rem, 1rem + 4.4vw, 5rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  --fs-h4: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-stat: clamp(2.75rem, 1.6rem + 3.6vw, 5rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-button: 0.875rem;

  --lh-tight: 0.9;
  --lh-heading: 0.98;
  --lh-body: 1.6;
  --track-eyebrow: 0.28em;   /* echoes the spaced M O T O */
  --track-button: 0.16em;

  /* Space */
  --gutter-x: clamp(1rem, 4vw, 4rem);
  --gap: clamp(1rem, 1.6vw, 1.5rem);
  --wrap: 1440px;
  --chapter-y: clamp(5rem, 3.5rem + 7vw, 10rem);
  --nav-h: 72px;
  --nav-h-top: 104px;
  --brand-h: 64px;          /* logo height over the hero */
  --brand-dock: 0.72;       /* logo scale in the slim bar */
  --cut: 14px;              /* chamfered corners, like the letterforms */

  /* Motion */
  --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.65, 0, 0.35, 1);
  --dur-micro: 0.3s;
  --dur-hover: 0.45s;

  /* Layers */
  --z-nav: 50;
  --z-menu: 40;
  --z-skip: 100;
}

@media (max-width: 899px) {
  :root { --nav-h: 64px; --nav-h-top: 76px; --brand-h: clamp(40px, 11vw, 52px); --brand-dock: 0.8; --cut: 10px; }
}