/* Bisoux — Spacing, radius, motion, elevation.
   8-pt scale. Single calm column, low density, generous margins.
   Separate with space & surface tone before reaching for borders. */

:root {
  /* ---- Spacing (8-pt) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layout */
  --column-max:    420px; /* the single calm column */
  --page-margin:   24px;  /* generous side margins */
  --tap-target:    44px;  /* minimum touch target */

  /* ---- Radius — generous, soft corners ---- */
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-app-icon: 22%; /* of icon size */

  /* ---- Elevation — soft, warm, low. Premium = roominess, not heavy shadow ---- */
  --shadow-sm: 0 1px 2px rgba(26, 22, 19, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 22, 19, 0.06);
  --shadow-lg: 0 12px 36px rgba(26, 22, 19, 0.10);
  --shadow-accent: 0 6px 20px rgba(126, 42, 42, 0.18); /* the bisou, when it blooms */

  /* ---- Motion — smooth and soft, never bouncy ---- */
  /* default entrance: fade + rise a few px; --motion-slow is the bisou bloom */
  --motion-fast: 200ms; /* @kind other */
  --motion-dur:  300ms; /* @kind other */
  --motion-slow: 600ms; /* @kind other */
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --motion-rise: 6px; /* @kind spacing */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms; /* @kind other */
    --motion-dur:  0ms; /* @kind other */
    --motion-slow: 0ms; /* @kind other */
    --motion-rise: 0px;
  }
}