:root {
  --color-primary: #0e7dc4;
  --color-text: #2f3438;
  --color-muted: #65717c;
  --color-border: #e6e9ed;
  --color-surface: #ffffff;
  --color-soft: #f5f7f9;
  --shadow-panel: 0 10px 24px rgba(30, 42, 56, 0.12);
  font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  color: var(--color-text);
  background: #fbfdff;
}

body::before {
  position: fixed;
  inset: -70%;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, rgba(131, 201, 222, 0.315), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(14, 125, 196, 0.195), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(131, 201, 222, 0.09));
  transform: translate3d(-8%, -6%, 0) scale(1.02);
  animation: ambient-background 12s ease-in-out infinite alternate;
}

@keyframes ambient-background {
  from {
    transform: translate3d(-8%, -6%, 0) scale(1.02);
  }

  to {
    transform: translate3d(18%, 12%, 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}
button,
input,
select {
  font: inherit;
}