:root,
html {
  color-scheme: dark;
}

:root {
  /* Colors */
  --bg:     #0a0a0a;
  --fg:     #f0f0f0;
  --accent: #ffffff;
  --muted:  #9a9a9a;  /* 7.0:1 on --bg (AAA). Was #7a7a7a — only 4.6:1. */
  --border: #1f1f1f;

  /* Typography */
  --mono: 'Fragment Mono', 'Courier New', monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.8125rem;  /* 13px — labels, meta */
  --text-s:    0.9375rem;  /* 15px — nav, captions */
  --text-base: 1.0625rem;  /* 17px — body */
  --text-m:    1.375rem;   /* 22px — lead copy */
  --text-l:    clamp(2rem, 5vw, 3.5rem);   /* section headings */
  --text-xl:   clamp(3rem, 8vw, 6rem);     /* hero */

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --max-w: 1200px;
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  200ms;
}