:root {
  color-scheme: dark;

  /* === PALETTE — Pear Meadow: vibrant yellow-green on warm near-black === */
  /* Primary: #dced31 (yellow-green) | Secondary: #7d8570 (muted sage) | Background: #1c1b17 */
  --bg:           #1c1b17;
  --bg-raised:    #242320;
  --bg-card:      #2a2925;
  --bg-card-alt:  #32312d;

  --text-primary:   #f4f1e8;
  --text-secondary: #a8a89c;
  --text-muted:     #6a6a62;

  --accent:       #dced31;
  --accent-dim:   rgba(220, 237, 49, 0.10);
  --accent-glow:  rgba(220, 237, 49, 0.18);

  --accent-secondary: #7d8570;
  --accent-secondary-dim: rgba(125, 133, 112, 0.10);

  --border:       rgba(244, 241, 232, 0.07);
  --border-mid:   rgba(244, 241, 232, 0.13);

  --error:        #e07070;
  --success:      #7d8570;

  /* === TYPEFACE — Sora: geometric, clean, with subtle humanist warmth === */
  --font: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* === SPACING — 8px base unit, mathematical scale === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* === RADII — restrained, geometric === */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;

  /* === MOTION — smooth, liquid, like quality machinery === */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 420ms;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}