/* regio.group — Radius, Shadows, Density, Motion */

:root {
  /* radius */
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* shadows — subtle / default / prominent */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 24px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
  --shadow-3: 0 20px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.6);
}

[data-theme="light"] {
  --shadow-1: 0 1px 2px rgba(20,24,30,.06);
  --shadow-2: 0 6px 24px rgba(20,24,30,.10), 0 1px 2px rgba(20,24,30,.06);
  --shadow-3: 0 20px 60px rgba(20,24,30,.16), 0 2px 8px rgba(20,24,30,.08);
}

/* Density modes — toggle on body. Scales row height + cell padding. */
body[data-density="comfortable"] { --row-h: 44px; --cell-py: 12px; --cell-px: 14px; }
body[data-density="compact"]     { --row-h: 36px; --cell-py: 8px;  --cell-px: 12px; }
body[data-density="dense"]       { --row-h: 28px; --cell-py: 4px;  --cell-px: 10px; }

/* Reduced motion — kills transitions/animations app-wide. */
body[data-reduced-motion="true"] *,
body[data-reduced-motion="true"] *::before,
body[data-reduced-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}