/* Grand Slam Venture Studio — design tokens
 * Studied DNA: rigle.com — black canvas · one heavy grotesque with black-italic emphasis ·
 * gradient flood panels · pinned chevron step sequence · stacked cards · marquee.
 * Colour is Grand Slam's brand navy (#07183F / #061D48 → #02112E) with periwinkle accents from the artwork.
 * Every colour / font / space / radius in index.html references these by name.
 */
:root {
  color-scheme: dark;

  /* Surfaces */
  --color-ink: #000000;
  --color-ink-2: #141414;          /* cards */
  --color-ink-3: #262626;          /* toast */
  --color-field: #333333;          /* form fields, as studied */
  --color-line: #f5f5f526;

  /* Text on ink */
  --color-paper: #f5f5f5;
  --color-paper-60: #f5f5f599;
  --color-paper-40: #f5f5f566;
  --color-muted: #a3a3a3;

  /* Brand navy — sampled from the Grand Slam icon and background artwork */
  --color-navy: #061d48;           /* flood start, artwork top-left */
  --color-navy-deep: #02112e;      /* flood end, artwork shadow */
  --color-navy-mid: #0c2b66;       /* lifted navy for front cards */
  --color-brand-white: #fdfcfa;    /* the mark's off-white */
  --color-on-navy: #fdfcfa;
  --color-on-navy-60: #fdfcfaa6;
  --color-chip: #fdfcfa;

  /* Accent on black — periwinkle from the artwork's highlights (navy text on it ≥ 8:1) */
  --color-accent: #a9bdf0;
  --color-accent-2: #7f97cf;
  --color-accent-3: #536c9b;
  --color-on-accent: #07183f;      /* icon navy */

  /* Chevron field (how-it-works) */
  --color-chev-fill: #061d48;
  --color-chev-edge: #a9bdf0;

  --color-focus: #a9bdf0;

  /* Type */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "Montserrat", ui-sans-serif, system-ui, sans-serif;  /* logo lockup only, matching the brand artwork */
  --weight-body: 400;
  --weight-bold: 700;
  --weight-heavy: 800;

  --text-caption: 0.8125rem;
  --text-small: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-statement: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --text-h3: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --text-h2: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem);
  --text-h1: clamp(2.75rem, 1.6rem + 3.6vw, 4.6rem);
  --text-mega: clamp(4rem, 1.5rem + 12vw, 13rem);

  --tracking-tight: -0.035em;
  --tracking-mega: -0.045em;

  /* Space — 4pt base */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --section-pad: clamp(5rem, 3rem + 6vw, 9rem);

  --page-max: 77.5rem;
  --gutter: clamp(1rem, 0.4rem + 3vw, 6.25rem);

  /* Shape */
  --radius-button: 0.5rem;
  --radius-card: 1.5rem;
  --radius-pill: 100vw;
  --border-heavy: 3px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);  /* rigle.com step easing */
  --dur-short: 180ms;
  --dur-med: 420ms;
  --dur-long: 1100ms;
  --dur-step: 750ms;               /* four-majors step swap, as studied on rigle.com */

  --z-content: 1;
  --z-toast: 40;
  --z-nav: 50;
}