/*
  Breakpoints (referenced directly in media queries -- CSS custom
  properties can't be interpolated into @media conditions):
    mobile:  < 768px
    tablet:  768px - 1199px
    desktop: >= 1200px (content capped at --content-max-width)
*/

:root {
  /* Brand colors, from the XD design (#00FFFF was an XD guide color, dropped) */
  --color-primary: #3CDE67;      /* neon green -- headings, links, CTAs */
  --color-primary-dark: #245239; /* deep secondary green -- dark section backgrounds */
  --color-ink: #070707;          /* near-black -- body text on light backgrounds */
  --color-void: #030403;         /* near-black -- page/section backgrounds */
  --color-white: #FFFFFF;
  --color-off-white: #F5F5F5;
  --color-gray: #707070;         /* secondary/muted text */
  --color-gray-light: #C7C7C7;   /* dividers */
  --color-teal: #7CCCBC;         /* muted accent */
  --color-dataviz-blue: #4493F1; /* reserved for data-viz labels, not general UI */

  /* Typography */
  --font-display: 'GT Walsheim', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  --font-size-hero: clamp(2.25rem, 4.5vw + 1rem, 3.5rem);   /* 56px at desktop */
  --font-size-h2: clamp(1.375rem, 2vw + 1rem, 1.75rem);      /* 28px at desktop */
  --font-size-lead: clamp(1.125rem, 1vw + 1rem, 1.4375rem);  /* 23px at desktop */
  --font-size-body: 1rem;
  --font-size-nav: 1.125rem;                                 /* 22px, tightened for mobile */
  --font-size-cta: 1.125rem;                                 /* 18px */
  --font-size-mono: 1.125rem;                                /* 19-20px */
  --font-size-quote: clamp(1.25rem, 1vw + 1rem, 1.5rem);     /* 24px */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --content-max-width: 1440px;
  --header-height: 5.5rem;
}