/* Design + motion tokens. The animation module reads the --ease-*, --dur-* and --spring-* values at runtime,
   so changing them here changes CSS keyframes AND the JS-driven animations. */
:root {
  /* easing: purpose-based */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);        /* general movement */
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* things entering */
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);       /* things leaving */
  --ease-morph: cubic-bezier(0.65, 0, 0.35, 1);       /* shape changes */
  --ease-burst: cubic-bezier(0.1, 0.8, 0.3, 1);       /* particles */
  /* durations (ms, unitless so JS can read them) */
  --dur-fast: 140;
  --dur-med: 280;
  --dur-slow: 520;
  --dur-morph: 260;
  --dur-flip: 380;
  --dur-burst: 640;
  --stagger: 14;       /* ms between neighbours in the load reveal */
  --stagger-max: 700;  /* cap so big layouts never feel slow */
  /* spring (press): stiffness / damping / mass */
  --spring-stiffness: 420;
  --spring-damping: 20;
  --spring-mass: 1;
  --press-scale: 0.93;
  --burst-count: 10;
  /* colour (UI chrome) */
  --bg: #0b0e14; --surface: #131822; --surface-2: #1a2130; --line: #2a3345; --text: #e8ecf3; --dim: #8d98ab; --accent: #f59e0b; --on-accent: #0b0e14; --focus: #7dd3fc;
  --radius: 10px;
  /* spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* type scale */
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 15px; --text-lg: 18px;
  /* radii */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-pill: 999px;
  color-scheme: dark;
}
:root[data-ui="light"] { --bg: #f4f5f8; --surface: #fff; --surface-2: #eef0f5; --line: #cdd2de; --text: #171c29; --dim: #586177; --accent: #a94d08; --on-accent: #ffffff; --focus: #1d4ed8; color-scheme: light; }