/* ============================================
   FUTURE COMPASS — DESIGN SYSTEM TOKENS
   ============================================ */

:root {
  /* ---- Color Palette ---- */
  --navy: #0B2A6F;
  --navy-deep: #071c4a;
  --navy-soft: #2C4A8C;
  --teal: #2F9CA6;
  --teal-deep: #237D85;
  --teal-tint: #E6F4F5;
  --coral: #E96A6A;
  --coral-deep: #D14F4F;
  --coral-tint: #FCEAEA;
  --lavender: #DCCEF8;
  --lavender-deep: #B79EE8;
  --lavender-tint: #F4EFFD;
  --yellow: #F8D77E;
  --yellow-deep: #EFC247;
  --off-white: #F8F6F3;
  --white: #FFFFFF;
  --ink: #1A2238;
  --ink-soft: #4B5266;
  --ink-faint: #8A8F9E;
  --border-soft: #E8E3DC;

  /* ---- Typography ---- */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-data: 'Space Grotesk', monospace;

  --fw-heading: 800; /* ExtraBold */
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;

  /* Type scale (mobile-first; fluid via clamp) */
  --fs-h1: clamp(2rem, 6vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 4.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 3vw, 1.75rem);
  --fs-h4: clamp(1.05rem, 2.2vw, 1.25rem);
  --fs-body-lg: clamp(1.05rem, 2vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-stat: clamp(2.25rem, 6vw, 3.5rem);

  /* ---- Spacing scale ---- */
  --sp-2xs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4.5rem;
  --sp-4xl: 6.5rem;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --shadow-sm: 0 2px 8px rgba(11, 42, 111, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 42, 111, 0.08);
  --shadow-lg: 0 16px 40px rgba(11, 42, 111, 0.12);
  --shadow-coral: 0 10px 28px rgba(233, 106, 106, 0.32);
  --shadow-teal: 0 10px 28px rgba(47, 156, 166, 0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.32s;
  --dur-slow: 0.6s;

  /* ---- Layout ---- */
  --max-width: 1240px;
  --nav-height: 76px;
  --nav-height-scrolled: 64px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}