@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=IBM+Plex+Mono:wght@500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Color Palette */
  --color-ink: #0F1428;
  --color-apex-blue: #0263DC;
  --color-ignite-coral: #F7A319;
  --color-signal-teal: #06D9F9;
  --color-violet-ascent: #034AAE;
  --color-cloud: #F6F7FB;
  --color-mist: #E4E7F2;
  --color-slate: #5B6178;
  --color-paper: #FFFFFF;

  /* Subtle Tints for Badges and Hover States */
  --color-blue-tint: rgba(2, 99, 220, 0.08);
  --color-coral-tint: rgba(247, 163, 25, 0.10);
  --color-teal-tint: rgba(6, 217, 249, 0.10);
  --color-violet-tint: rgba(3, 74, 174, 0.08);

  /* Typography */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Font Scale Desktop */
  --fs-hero: 3.75rem;     /* 60px */
  --fs-h2: 2.625rem;      /* 42px */
  --fs-h3: 1.5rem;        /* 24px */
  --fs-h4: 1.1875rem;     /* 19px */
  --fs-body-lg: 1.1875rem;/* 19px */
  --fs-body: 1rem;        /* 16px */
  --fs-body-sm: 0.875rem; /* 14px */
  --fs-eyebrow: 0.8125rem;/* 13px */

  /* Line Heights */
  --lh-hero: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-h4: 1.3;
  --lh-body: 1.6;

  /* Spacing Scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Container */
  --max-width-content: 1280px;
  --max-width-text: 720px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-resting: 0 4px 16px rgba(15, 20, 40, 0.06);
  --shadow-hover: 0 16px 40px rgba(15, 20, 40, 0.14);
  --shadow-mega-menu: 0 24px 60px rgba(15, 20, 40, 0.12);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root {
    --fs-hero: 2.125rem;   /* 34px */
    --fs-h2: 1.75rem;      /* 28px */
    --fs-h3: 1.25rem;      /* 20px */
    --fs-h4: 1.125rem;     /* 18px */
    --fs-body-lg: 1.0625rem;/* 17px */
    --fs-body: 0.9375rem;  /* 15px */
    --fs-eyebrow: 0.75rem; /* 12px */

    --space-8: 48px;
    --space-9: 64px;
    --space-10: 64px;
  }
}