:root {
  color-scheme: light;
  --ink: #0f172a;
  --muted: #5b6475;
  --accent: #6d5efc;
  --accent-2: #2ad4b5;
  --accent-3: #f7b04b;
  --bg: #eef1f6;
  --bg-2: #f9fafc;
  --card: rgba(255, 255, 255, 0.88);
  --stroke: rgba(15, 23, 42, 0.08);
  --shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 16px 32px rgba(30, 41, 59, 0.08);
  --radius: 22px;
  --modal-inset: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: #eef1f6;
  background-image: radial-gradient(circle at 20% 20%, #ffffff 0%, #eef2ff 35%, #eef1f6 70%, #e5e7ef 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

body.modal-open,
body.nav-open {
  overflow: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(0.5px);
}

body::before {
  top: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(109, 94, 252, 0.35) 0%, rgba(109, 94, 252, 0) 70%);
}

body::after {
  bottom: -140px;
  left: -120px;
  background: radial-gradient(circle, rgba(42, 212, 181, 0.4) 0%, rgba(42, 212, 181, 0) 70%);
}