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

:root {
  /* // MARK: - Color Hex Values */
  --zx-primary: #007aff;
  --zx-secondary: #5856d6;
  --zx-success: #34c759;
  --zx-warning: #ff9500;
  --zx-error: #ff3b30;
  --zx-info: #5ac8fa;
  --zx-vip-gold: #ffd700;

  --zx-bg-0: #05070d;
  --zx-bg-1: #0b1020;
  --zx-surface: rgba(17, 25, 40, 0.62);
  --zx-surface-2: rgba(255, 255, 255, 0.08);
  --zx-border: rgba(255, 255, 255, 0.12);
  --zx-border-soft: rgba(255, 255, 255, 0.08);
  --zx-text-muted: rgba(255, 255, 255, 0.74);
  --zx-text-subtle: rgba(255, 255, 255, 0.60);
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  background: linear-gradient(180deg, var(--zx-bg-0), var(--zx-bg-1) 55%, #05060b);
  color: #fff;
}

::selection {
  background: rgba(0, 122, 255, 0.35);
}

@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;
  }
}