:root {
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-18: 18px;
  --spacing-24: 24px;
  --spacing-31: 31px;
  --spacing-41: 41px;
  --spacing-45: 45px;
  --spacing-68: 68px;

  --gutter: var(--spacing-24);

  --radius-xl: 12px;
  --radius-2xl: 22.5px;
  --radius-full: 9999px;
  --radius-buttons-outlined: 22.5px;

  --color-canvas: #0A0A0A;
  --color-surface: #141418;
  --color-ice: #EEF1FA;
  --color-steel: #8C8FA3;

  --glass-fill: rgba(14, 14, 20, 0.55);
  --glass-fill-hover: rgba(20, 20, 30, 0.6);
  --glass-border: rgba(168, 155, 230, 0.18);
  --glass-border-hover: rgba(168, 155, 230, 0.4);

  --brand-blue: #2A5FF0;
  --brand-violet: #6D28FF;
  --brand-magenta: #D423B0;
  --brand-blue-lt: #5B96FF;
  --brand-violet-lt: #8B5CFF;
  --brand-magenta-lt: #FF4FD0;

  --gradient-brand: linear-gradient(100deg, var(--brand-blue) 0%, var(--brand-violet) 52%, var(--brand-magenta) 100%);
  --gradient-text: linear-gradient(100deg, var(--brand-blue-lt) 0%, var(--brand-violet-lt) 52%, var(--brand-magenta-lt) 100%);

  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --text-micro: 10px;
  --text-label: 12px;
  --text-sm: 14px;
  --text-body: 18px;
  --text-heading: clamp(30px, 8.6vw, 41px);
  --text-display: clamp(38px, 11.4vw, 51px);

  --leading-body: 1.33;
  --leading-heading: 0.9;
  --leading-display: 0.9;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--spacing-41);
    --text-body: clamp(18px, 2.4vw, 22px);
    --text-heading: clamp(41px, 5.4vw, 68px);
    --text-display: clamp(51px, 8.4vw, 96px);
  }
}

@media (min-width: 1024px) {
  :root {
    --text-body: clamp(20px, 1.9vw, 29px);
    --leading-body: 1.26;
    --text-heading: clamp(51px, 4.6vw, 84px);
    --text-display: clamp(64px, 6.4vw, 124px);
  }
}

@media (min-width: 1280px) {
  :root { --gutter: var(--spacing-68); }
}