:root {
  --bg: #060b16;
  --bg-elevated: #0b1222;
  --bg-soft: #10192d;

  --surface: rgba(10, 17, 31, 0.78);
  --surface-2: rgba(14, 22, 40, 0.82);
  --surface-3: rgba(18, 29, 52, 0.90);

  --text: #f4f7ff;
  --text-muted: #a7b3cc;
  --text-soft: #77849e;

  --primary: #4e7bff;
  --primary-rgb: 78, 123, 255;
  --primary-hover: #6b91ff;
  --primary-active: #3f69e3;

  --accent: #ffbf47;
  --accent-rgb: 255, 191, 71;
  --accent-hover: #ffd166;
  --accent-strong: #ffb100;
  --accent-soft: rgba(255, 191, 71, 0.16);

  --success: #35e0a1;
  --success-rgb: 53, 224, 161;

  --danger: #ff5f73;
  --danger-rgb: 255, 95, 115;

  --youtube: #ff3347;
  --youtube-rgb: 255, 51, 71;

  --twitch: #9146ff;
  --twitch-rgb: 145, 70, 255;

  --kick: #39e75f;
  --kick-rgb: 57, 231, 95;

  --instagram: #ff4d84;
  --instagram-rgb: 255, 77, 132;

  --cyan: #36b4ff;
  --cyan-rgb: 54, 180, 255;

  --violet: #8d6cff;
  --violet-rgb: 141, 108, 255;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --outline: rgba(78, 123, 255, 0.32);

  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.42);
  --shadow-xl: 0 34px 110px rgba(0, 0, 0, 0.52);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-section: 26px;
  --radius-pill: 999px;

  --container: 1440px;
  --header-height: 78px;
  --header-offset: 118px;
  --section-spacing: 100px;
  --section-padding-x: 24px;

  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Oxanium", "Outfit", "Inter", sans-serif;
  --font-heading: "Outfit", "Oxanium", "Inter", sans-serif;
  --font-brand: "Orbitron", "Oxanium", sans-serif;
  --font-tech: "Rajdhani", "Oxanium", "Inter", sans-serif;

  --transition-fast: 160ms ease;
  --transition: 220ms ease;
  --transition-slow: 320ms ease;

  --gradient-primary: linear-gradient(135deg, #4e7bff 0%, #7a6bff 100%);
  --gradient-accent: linear-gradient(135deg, #ffb100 0%, #ffd166 100%);
  --gradient-surface: linear-gradient(180deg, rgba(15, 24, 42, 0.90) 0%, rgba(10, 17, 31, 0.88) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
}

@media (max-width: 820px) {
  :root {
    --section-spacing: 80px;
    --section-padding-x: 16px;
    --header-offset: 108px;
    --radius-section: 22px;
  }
}

@media (max-width: 520px) {
  :root {
    --section-spacing: 64px;
    --section-padding-x: 12px;
    --header-offset: 96px;
    --radius-section: 20px;
  }
}