@property --gradient-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(210, 107, 52, 0.45);
}

@property --gradient-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(47, 159, 99, 0.32);
}

:root {
  color-scheme: light;
  --ink: #1b1b1b;
  --muted: #5c5c5c;
  --accent: #d26b34;
  --accent-strong: #b4531f;
  --surface: #fffaf5;
  --surface-strong: #ffffff;
  --surface-alt: #f2ece6;
  --border: rgba(27, 27, 27, 0.12);
  --shadow: 0 24px 50px rgba(22, 16, 10, 0.18);
  --low: #2f9f63;
  --medium: #d19722;
  --high: #d0442f;
  --font-size-multiplier: 1;
  --gradient-primary: rgba(210, 107, 52, 0.45);
  --gradient-secondary: rgba(47, 159, 99, 0.32);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Source Sans 3", "Trebuchet MS", sans-serif;
  font-size: calc(1rem * var(--font-size-multiplier, 1));
  color: var(--ink);
  background: radial-gradient(circle at top, #f7ece1, #f1f2f0 35%, #edf0f4 70%);
  overflow-x: hidden;
}

body.resizing {
  cursor: col-resize;
  user-select: none;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  z-index: 0;
}

body::before {
  background: radial-gradient(circle, var(--gradient-primary), transparent 70%);
  top: -15vw;
  left: -10vw;
  transition: --gradient-primary 0.4s ease;
}

body::after {
  background: radial-gradient(circle, var(--gradient-secondary), transparent 70%);
  bottom: -25vw;
  right: -10vw;
  transition: --gradient-secondary 0.4s ease;
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Dark mode overrides ─────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e4e4e7;
  --muted: #9ca3af;
  --surface: #1a1a1e;
  --surface-strong: #232328;
  --surface-alt: #2a2a30;
  --border: rgba(255, 255, 255, 0.1);
  --shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  --low: #34d399;
  --medium: #fbbf24;
  --high: #f87171;
}

[data-theme="dark"] body {
  background: radial-gradient(circle at top, #1a1a1e, #141418 35%, #111115 70%);
}

[data-theme="dark"] body::before {
  opacity: 0.3;
}

[data-theme="dark"] body::after {
  opacity: 0.25;
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}