:root {
  /* Colors — dark-first */
  --clr-bg:       #08090C;
  --clr-surface:  #0D1018;
  --clr-surface2: #111520;
  --clr-border:   rgba(255, 255, 255, 0.07);
  --clr-border-h: rgba(255, 255, 255, 0.14);

  --clr-white:    #E8F4F8;
  --clr-muted:    rgba(232, 244, 248, 0.92);
  --clr-dim:      rgba(232, 244, 248, 0.55);
  --clr-accent:   #C8C8D8;

  /* Typography */
  --font-head: 'Afacad', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Afacad', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.4375rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;
  --text-5xl:  4.5rem;
  --text-6xl:  6rem;

  /* Spacing */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container: 1240px;
  --gutter:    clamp(1.5rem, 5vw, 4rem);
  --nav-h:     80px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  /* Motion */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --duration: 260ms;
}