:root {
  --color-bg: #050505;
  --color-surface: #0a0c0a;
  --color-surface-elevated: #101310;
  --color-line: rgba(255, 255, 255, 0.10);
  --color-line-subtle: rgba(255, 255, 255, 0.05);

  --color-text: #f5f5f7;
  --color-muted: #8e9690;
  --color-muted-strong: #a5aca6;

  --color-botanical: #6c8f6f;
  --color-botanical-bright: #00e575;
  --color-orange: #ff5300;

  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --header-height: 74px;
  --announcement-height: 26px;
  --container-width: 1720px;
  --gutter: clamp(1rem, 4vw, 3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --transition-fast: 180ms ease;
  --transition-base: 320ms ease;
}

@media (max-width: 767px) {
  :root {
    --announcement-height: 51px;
  }
}