:root{
  --width: 100vw;
  --indent: 0px;
  --half-indent: 0px;
  --side: 0px;

  --foreground: #0b0b0b;
  --background: #050505;
  --surface: #121212;
  --surface-soft: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-dark: #111111;
  --accent: #ffffff;
  --accent-strong: #ffffff;
  --accent-dark: #000000;
  --map-water: #ffffff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);

  --radius: 0px;
  --radius-large: 2px;
  --button-height: 48px;
  --header-height: 76px;
  --catalog-stage-height: 100vh;
  --page-pad: clamp(16px, 2.5vw, 28px);
  --page-pad-wide: clamp(20px, 5vw, 72px);
  --section-gap: clamp(24px, 5vw, 56px);

  --size0: 8px;
  --size01: 12px;
  --size02: 16px;
  --size1: 18px;
  --size10: 20px;
  --size11: 24px;
  --size12: clamp(28px, 3vw, 36px);
  --size20: clamp(34px, 5vw, 64px);
  --size21: clamp(40px, 6vw, 88px);
  --size2: 48px;
  --size22: clamp(42px, 7vw, 96px);
  --size3: 56px;
  --size31: 72px;
  --size32: 96px;
  --size33: 128px;
}

@media (max-width: 900px){
  :root{
    --header-height: 72px;
    --radius: 0px;
    --radius-large: 2px;
    --page-pad: 16px;
    --page-pad-wide: 18px;
    --section-gap: 22px;
    --size1: 17px;
    --size10: 18px;
    --size11: 21px;
  }
}