@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;700;800&display=swap");

:root {
  --zx-primary: #ef4444;
  --zx-secondary: #f97316;
  --zx-success: #22c55e;
  --zx-warning: #f59e0b;
  --zx-error: #ef4444;
  --zx-info: #2563eb;
  --zx-vip-gold: #f7c948;

  --zx-bg-0: #060812;
  --zx-bg-1: #101726;
  --zx-bg-2: #1f2638;

  --zx-surface: rgba(13, 19, 34, 0.74);
  --zx-surface-2: rgba(20, 28, 45, 0.74);
  --zx-border: rgba(255, 255, 255, 0.17);
  --zx-border-soft: rgba(255, 255, 255, 0.12);

  --zx-text-main: #f8f8fc;
  --zx-text-muted: rgba(240, 244, 255, 0.79);
  --zx-text-subtle: rgba(205, 214, 236, 0.62);

  --zx-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 26px 68px rgba(1, 5, 16, 0.56);
}

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: "Manrope", "SF Pro Text", "Segoe UI", sans-serif;
  background: radial-gradient(circle at 12% 8%, #1f3557 0%, #121b2f 35%, #070a14 100%);
  color: var(--zx-text-main);
}

h1,
h2,
h3,
h4,
h5,
h6,
.zx-heading {
  font-family: "Sora", "Avenir Next", sans-serif;
  letter-spacing: -0.025em;
}

::selection {
  background: rgba(43, 107, 255, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}