:root {
  /* ─── Colors ─── */
  --color-bg:           #080808;
  --color-bg-surface:   #111111;
  --color-text-primary: #F0EEE8;
  --color-text-muted:   rgba(240, 238, 232, 0.35);
  --color-accent:       #C8FF00;
  --color-accent-dim:   rgba(200, 255, 0, 0.15);
  --color-border:       rgba(240, 238, 232, 0.1);
  --color-white:        #FFFFFF;
  --color-black:        #000000;

  /* ─── Typography ─── */
  --font-display: "aktiv-grotesk", sans-serif;   /* Headings, hero, titles */
  --font-body:    "aktiv-grotesk", sans-serif;   /* Body, UI text */
  --font-mono:    "dm-mono-medium", sans-serif;  /* Labels, tags, mono text */

  --text-hero:   clamp(80px, 12vw, 180px);
  --text-h1:     clamp(48px, 6vw, 96px);
  --text-h2:     clamp(36px, 4vw, 64px);
  --text-h3:     clamp(24px, 3vw, 40px);
  --text-body:   clamp(14px, 1.2vw, 18px);
  --text-small:  clamp(11px, 1vw, 13px);
  --text-label:  11px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* ─── Spacing ─── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 160px;

  --space-container: 40px;
  --space-section:   clamp(80px, 10vw, 160px);

  --grid-gap: 24px;
  --grid-max: 1440px;

  /* ─── Animation ─── */
  --duration-fast:   0.2s;
  --duration-normal: 0.4s;
  --duration-slow:   0.8s;
  --duration-slower: 1.2s;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
  :root {
    --space-container: 20px;
    --text-label: 10px;
  }
}