@font-face {
  font-family: Sora;
  src: url("/assets/fonts/Sora-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --vs-canvas: #fff;
  --vs-surface: #fff;
  --vs-surface-raised: #fff;
  --vs-ink: #15172e;
  --vs-violet: #6747f5;
  --vs-action: #6747f5;
  --vs-blue: #528af7;
  --vs-cyan: #4dcae9;
  --vs-ice: #f5f6fc;
  --vs-accent-soft: #eeeaff;
  --vs-white: #fff;
  --vs-muted: #666c80;
  --vs-line: #dde1ed;
  --vs-focus: #4428b7;
  --vs-strong-surface: #15172e;
  --vs-strong-ink: #fff;
  --vs-shadow-rgb: 21 23 46;
  --vs-font-title: Sora, Arial, sans-serif;
  --vs-font-body: Inter, Arial, sans-serif;
  --vs-radius-control: 8px;
  --vs-radius-card: 12px;
  --vs-motion: 180ms cubic-bezier(.2, .8, .2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --vs-canvas: #111321;
  --vs-surface: #191c2c;
  --vs-surface-raised: #20243a;
  --vs-ink: #f1f2fa;
  --vs-violet: #a898ff;
  --vs-action: #6747f5;
  --vs-blue: #82aaff;
  --vs-cyan: #70d9ef;
  --vs-ice: #1b1f31;
  --vs-accent-soft: #302a4e;
  --vs-muted: #b1b6c9;
  --vs-line: #353a52;
  --vs-focus: #c1b5ff;
  --vs-strong-surface: #080a13;
  --vs-strong-ink: #f1f2fa;
  --vs-shadow-rgb: 0 0 0;
}

body {
  position: relative;
  isolation: isolate;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: -15%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 18%, rgb(103 71 245 / 9%), transparent 34%),
    radial-gradient(ellipse at 88% 12%, rgb(77 202 233 / 8%), transparent 31%),
    radial-gradient(ellipse at 68% 88%, rgb(82 138 247 / 6%), transparent 35%);
  content: "";
  animation: vs-ambient-drift 28s ease-in-out infinite alternate;
}

:root[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse at 12% 18%, rgb(103 71 245 / 18%), transparent 34%),
    radial-gradient(ellipse at 88% 12%, rgb(77 202 233 / 13%), transparent 31%),
    radial-gradient(ellipse at 68% 88%, rgb(82 138 247 / 12%), transparent 35%);
}

@keyframes vs-ambient-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

@keyframes vs-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.theme-toggle {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--vs-line);
  border-radius: 10px;
  background: var(--vs-surface);
  color: var(--vs-ink);
  cursor: pointer;
  transition: background var(--vs-motion), border-color var(--vs-motion), color var(--vs-motion);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--vs-focus);
  outline-offset: 3px;
}

.theme-toggle:hover {
  border-color: var(--vs-violet);
  background: var(--vs-ice);
}

.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.brand img { color: var(--vs-ink); }
:root[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}