/* Short Commerce — radius, borders, shadow, glow, focus, motion. */
:root {
  --radius-hair: 2px;   /* marks, not containers: caret, share bars, diff marks */
  --radius-xs: 8px;     /* the default focus ring, user-menu rows */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 40px;

  --border-width: 1px;

  --shadow-card: 0 20px 50px rgba(0,0,0,0.5);
  /* Small floating panels (definition popovers): the negative spread keeps the blur under the panel,
     so a clipping ancestor such as the deck does not cut it off at the side. */
  --shadow-pop: 0 2px 6px rgba(0,0,0,0.3), 0 14px 32px -10px rgba(0,0,0,0.6);
  --shadow-rail: 0 0 14px rgba(0,223,130,0.7);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 600ms;

  /* Motion (DESIGN.md, Motion). static/js/v2/motion.js mirrors these values. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-count: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-move: cubic-bezier(0.55, 0, 0.1, 1);
  --duration-exit: 160ms;
  --duration-move: 560ms;
  --duration-turn: 380ms;
  --duration-reveal: 480ms;
  --duration-count: 600ms;
  --stagger: 60ms;
}

[data-theme="light"] {
  --shadow-pop: 0 1px 3px rgba(16,24,16,0.06), 0 12px 28px -12px rgba(16,24,16,0.22);
}

/* Built from theme colors: declared on every theme scope, so each one resolves against its own theme. */
:root, [data-theme] {
  --shadow-glow: 0 0 26px var(--glow);
  --shadow-glow-dot: 0 0 12px var(--glow-strong);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);   /* keyboard focus ring: emerald on dark, forest on light */
  --ring: inset 0 0 0 1px var(--border-strong);            /* the current item's outline (tabs, segments, switch) */
}