/* RST Group design tokens. Documented in landing/DESIGN.md. */
:root {
  /* Brand */
  --navy-900: #0D1B3A;   /* ink, dark surfaces */
  --navy-700: #122C59;   /* brand navy, numbers, links */
  --navy-500: #2B4A80;   /* hover on navy */
  --signal-500: #F5862A; /* the one accent: primary CTA, chevron mark, index numbers */
  --signal-400: #F89A4A; /* CTA hover */
  --live-500: #22A06B;   /* live GPS status only */

  /* Neutrals (cool, never mixed with warm grays) */
  --steel-900: #0F1A2E;  /* body text */
  --steel-600: #56627A;  /* secondary text, 5.9:1 on paper */
  --steel-300: #DCE1EA;  /* hairlines */
  --mist: #EEF1F6;       /* studio surface, matches unit photography */
  --paper: #F8F9FB;      /* page */
  --white: #FFFFFF;
  --on-navy: #F4F6FA;
  --on-navy-muted: #A9B4C9;

  /* Type */
  --font-sans: Manrope, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace; /* spec numbers only */

  /* Type scale by role (rem respects user zoom). Display sizes are fluid, text sizes fixed. */
  --text-caption: 0.75rem;    /* 12: fine print, sources, spec labels, legal row */
  --text-small: 0.8125rem;    /* 13: footer columns */
  --text-secondary: 0.875rem; /* 14: nav, eyebrow, chips, supporting text */
  --text-body: 1rem;          /* 16: body, never smaller for reading text */
  --text-lede: 1.125rem;      /* 18: section intros */
  --text-h2: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);   /* 30 to 48 */
  --text-h1: clamp(2.5rem, 1rem + 4.4vw, 4.5rem);      /* 40 to 72, hero only */

  /* Spacing scale: 4 8 12 16 24 32 40 48 64 80 96 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Radius */
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 9999px;

  /* Elevation (tinted to navy, never gray) */
  --shadow-1: 0 1px 2px rgba(13, 27, 58, 0.06);
  --shadow-2: 0 8px 32px rgba(13, 27, 58, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 300ms; --dur: 700ms;

  /* Layout */
  --gutter: 16px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; } }