:root {
  --onyx-bg: #050507;
  --onyx-elevated: rgba(10, 10, 15, 0.35);
  --onyx-elevated-2: rgba(15, 15, 20, 0.28);
  --onyx-outline: rgba(255, 255, 255, 0.08);

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

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

  --pill-radius: 999px;
  --card-radius: 28px;

  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.7);
  --transition-fast: 0.18s ease-out;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--onyx-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

html[data-theme="light"] {
  --onyx-bg: #f5f5fb;
  --onyx-elevated: rgba(255, 255, 255, 0.55);
  --onyx-elevated-2: rgba(240, 240, 255, 0.45);
  --text-primary: #050507;
  --text-secondary: #33334a;
  --text-muted: #77778f;
}

html[data-theme="auto"] {
  /* follows system theme */
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --onyx-bg: #f5f5fb;
    --onyx-elevated: rgba(255, 255, 255, 0.55);
    --onyx-elevated-2: rgba(240, 240, 255, 0.45);
    --text-primary: #050507;
    --text-secondary: #33334a;
    --text-muted: #77778f;
  }
}