/* Design system tokens implementing the Brand Bible */
:root {
  /* PALETTE */
  --mav-black: #080F15;
  --mav-white: #F8FAFF;
  --stormy-teal: #197278;
  --slate-grey: #788AA3;

  /* Secondary accents — NON-TEXT decorative elements ONLY */
  --brick-ember: #C20114;
  --amber-flame: #FFB627;

  /* SEMANTIC */
  --color-bg: var(--mav-black);
  --color-surface: #0E1520;
  --color-text: var(--mav-white);
  --color-text-dim: var(--slate-grey);
  --color-accent: var(--stormy-teal);
  --color-border: rgba(120, 138, 163, 0.15);

  /* TYPOGRAPHY - Host Grotesk */
  --font-primary: 'Host Grotesk', sans-serif;
  
  --fs-display: clamp(3.5rem, 8vw, 7rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.8rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.6rem);
  --fs-body: clamp(1rem, 1.2vw, 1.125rem);
  --fs-copy: clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-small: clamp(0.75rem, 0.9vw, 0.875rem);
  --fs-micro: 0.6875rem;

  /* SPACING */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  /* GRID SIGNATURE */
  --grid-color: rgba(120, 138, 163, 0.06);
  --grid-accent: rgba(25, 114, 120, 0.12);
  --crosshair-size: 12px;
}