:root {
  --seed-color: #7bb4ff;

  --onyx-bg: #050507;
  --onyx-elevated: #101018;
  --onyx-elevated-2: #181822;
  --onyx-outline: #2a2a3a;

  --accent-primary: #9ad6ff;
  --accent-secondary: #ffd27e;
  --accent-tertiary: #c6b8ff;

  --text-primary: #f7f7ff;
  --text-secondary: #c3c3d5;
  --text-muted: #8a8aa0;

  --backdrop-start: #1b2238;
  --backdrop-end: #101018;
  --backdrop-tint: rgba(255, 255, 255, 0.28);

  --pill-radius: 999px;
  --card-radius: 28px;
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.7);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.04);
  --transition-fast: 0.18s ease-out;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(circle at top, #151520 0, #050507 55%, #000 100%);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

.hidden {
  display: none !important;
}