:root {
  --color-bg: #fff;
  --color-text: #111;
  --color-primary: #2563eb;
  --color-border: #e5e7eb;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-text: #f0f0f0;
    --color-primary: #60a5fa;
    --color-border: #262626;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  font-family: var(--font-system);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

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

/* =========================================================================
   MOTION LIBRARY  (paired runtime: js/animations.js ANIMATION_REGISTRY)
   =========================================================================
   Canonical home for named micro-animation primitives: their @keyframes and
   their .motion-* utility classes. This block is the CSS half of the motion
   library; the runtime half is js/animations.js (ANIMATION_REGISTRY), and the
   human index is docs/animation-library.md. The skill that applies, suggests,
   and extends primitives is /orion_motion.

   RULES for anything added here (see /orion_motion steward mode):
   - Animate ONLY transform / opacity / filter (compositor-friendly; no jank).
   - Reference an --ease-* / --dur-* token below; never hardcode a curve or a
     duration a token already names.
   - Every primitive is a class + @keyframes pair here, an ANIMATION_REGISTRY
     entry in js/animations.js, and a row in docs/animation-library.md.
   - The prefers-reduced-motion block ABOVE already neutralises every animation
     for vestibular-sensitive users; do not add a second global override.

   Empty on a fresh install: fill it out incrementally via /orion_motion.
   ------------------------------------------------------------------------- */

:root {
  /* Easing tokens (add here as primitives need them). */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration scale (perceptual tiers; see /orion_disney Golden Rule). */
  --dur-micro: 120ms;      /* button press, toggle, chip select */
  --dur-enter: 220ms;      /* card / list entrance */
  --dur-feedback: 250ms;   /* modal open, status feedback */
  --dur-transition: 300ms; /* tab / view swap */
  --dur-celebrate: 450ms;  /* rare success moment */
}

/* Named primitives go below. None yet: add via /orion_motion steward mode.
   Example shape (do not ship until a real primitive is defined):

   @keyframes motionFooEnter {
     from { opacity: 0; transform: translateY(8px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   .motion-foo-enter {
     animation: motionFooEnter var(--dur-enter) var(--ease-out) both;
   }
*/