:root {
  color-scheme: dark;
  --color-bg: #040914;
  --color-bg-deep: #02060d;
  --color-surface: #0b1729;
  --color-surface-soft: rgba(16, 33, 58, 0.76);
  --color-surface-faint: rgba(10, 23, 42, 0.62);
  --color-line: rgba(133, 172, 255, 0.2);
  --color-line-strong: rgba(94, 210, 255, 0.48);
  --color-text: #f3f7ff;
  --color-text-soft: #d2def1;
  --color-text-muted: #8fa6c6;
  --color-cyan: #39d8ff;
  --color-blue: #7194ff;
  --color-green: #4be1ad;
  --color-amber: #ffc46b;
  --color-red: #ff7b93;
  --gradient-brand: linear-gradient(105deg, #f8fbff 4%, #39d8ff 52%, #8ca6ff 96%);
  --shadow-panel: 0 28px 80px rgba(0, 0, 0, 0.34);
  --shadow-large: 0 38px 120px rgba(0, 0, 0, 0.48);
  --content-max: 1420px;
  --text-max: 760px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --space-section: clamp(76px, 9vw, 136px);
  --radius-small: 14px;
  --radius-medium: 22px;
  --radius-large: 32px;
  --transition-fast: 180ms ease;
}

@media (max-width: 620px) {
  :root {
    --gutter: 18px;
    --space-section: 68px;
    --radius-large: 25px;
  }
}