:root {
  --ds-color-bg: #0b0b0c;
  --ds-color-bg-soft: #111214;
  --ds-color-surface: #151619;
  --ds-color-surface-soft: #1c1d21;
  --ds-color-surface-elevated: rgba(26, 27, 31, 0.88);
  --ds-color-border: rgba(255, 255, 255, 0.08);
  --ds-color-border-strong: rgba(255, 255, 255, 0.14);
  --ds-color-text: #f4f4f5;
  --ds-color-text-muted: #aeafb7;
  --ds-color-text-soft: #868892;
  --ds-color-accent: #b8a06a;
  --ds-color-accent-hover: #c7af79;
  --ds-color-success: #3f8f6b;
  --ds-color-warning: #b28a4a;
  --ds-color-danger: #9d4f4f;
  --ds-color-overlay: rgba(4, 6, 10, 0.64);

  --ds-font-sans: "Manrope", "Segoe UI", sans-serif;
  --ds-font-display: "Bebas Neue", "Oswald", sans-serif;
  --ds-text-display: clamp(3.1rem, 8vw, 5.8rem);
  --ds-text-h1: clamp(2.3rem, 5vw, 4rem);
  --ds-text-h2: clamp(1.8rem, 3.3vw, 2.9rem);
  --ds-text-h3: clamp(1.2rem, 2vw, 1.5rem);
  --ds-text-body: 1rem;
  --ds-text-small: 0.92rem;
  --ds-text-label: 0.78rem;
  --ds-line-body: 1.65;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  --ds-space-9: 56px;
  --ds-space-10: 72px;

  --ds-radius-sm: 10px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 24px;
  --ds-radius-xl: 32px;
  --ds-radius-pill: 999px;

  --ds-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.18);
  --ds-shadow-md: 0 24px 60px rgba(0, 0, 0, 0.24);
  --ds-shadow-lg: 0 36px 90px rgba(0, 0, 0, 0.34);

  --ds-container-width: 1240px;
  --ds-container-narrow: 1080px;
  --ds-header-height: 76px;
  --ds-transition-fast: 180ms ease;
  --ds-transition-base: 240ms ease;
}