/* ShuttleKita design tokens — single source of truth for color, type, spacing, radius */
:root {
  /* Color — black (dominant surface across the site, not just accent sections) */
  --black-950: #08080A;
  --black-900: #101013;
  --black-800: #18181C;
  --black-700: #27272E;
  --black-600: #3A3A44;

  /* Color — yellow (precise accent: CTAs, numerals, small highlights — used sparingly) */
  --accent-yellow: #FFC629;
  --accent-yellow-600: #E6AD10;
  --accent-yellow-200: #FFE9A8;
  --accent-yellow-ink: #7A5900; /* AA-safe dark amber for small text/labels on light backgrounds */
  --yellow-tint: linear-gradient(180deg, #FFF8E0 0%, #FFF2CB 100%); /* soft yellow surface for alternate sections + footer */
  --yellow-tint-line: #F0DE9E;

  /* Color — off-white (used only where a light section is needed for reading-heavy content) */
  --cream-50: #F7F7F5;
  --cream-100: #EFEFEC;
  --cream-200: #E2E2DC;

  /* Color — text on dark (the default context across most of the site) */
  --white-100: #FFFFFF;
  --white-70: rgba(255, 255, 255, 0.72);
  --white-45: rgba(255, 255, 255, 0.45);

  /* Color — text on light */
  --ink-900: #101013;
  --ink-700: #45454C;
  --ink-500: #737379;

  /* Color — hairline borders on dark */
  --border-dark: rgba(255, 255, 255, 0.1);
  --border-dark-strong: rgba(255, 255, 255, 0.16);

  /* Type — Space Grotesk for headings (technical/product feel), Inter for body */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 1.7rem + 3.4vw, 5rem);
  --fs-h1: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 1.35rem + 1.2vw, 2.375rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px; --sp-40: 160px;

  --section-pad: var(--sp-16);

  /* Radius — tighter, more product-grade than the previous pill-heavy system */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-default: 0 12px 32px -16px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 24px 64px -20px rgba(0, 0, 0, 0.6);

  /* Layout */
  --nav-h: 80px; /* the header floats over the hero, so heroes add this to their top padding */
  --content-max: 1240px;
  --gutter: var(--sp-4);

  /* Motion timing */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-medium: 0.5s;
  --dur-slow: 0.9s;
}

@media (min-width: 1024px) {
  :root {
    --section-pad: var(--sp-32);
    --gutter: var(--sp-8);
  }
}