/* ============================================================
   Hola Books — Spacing, radius, shadow & motion tokens
   Copied verbatim from the Hola Books design system.
   Soft, friendly geometry: rounded cards (12px), pill buttons
   and images (16px), small chip/badge radii. Shadows are gentle
   and warm-neutral, never harsh.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* section rhythm */
  --section-pad-y: clamp(3rem, 2rem + 5vw, 6rem);
  --container-max: 1200px;
  --container-pad: clamp(1rem, 0.5rem + 3vw, 2.5rem);

  /* ---- Radii (from the live theme's custom CSS) ---- */
  --radius-xs: 4px;    /* article tags            */
  --radius-sm: 8px;    /* product badges, chips   */
  --radius-md: 12px;   /* cards                   */
  --radius-lg: 16px;   /* buttons, images, media  */
  --radius-xl: 24px;   /* feature panels          */
  --radius-pill: 999px;

  /* ---- Component radii (decided 2026-09-09: buttons 10, cards 12) ---- */
  --radius-btn:    10px;
  --radius-btn-sm: 8px;
  --radius-field:  10px;
  --radius-card:   12px;
  --radius-panel:  16px;   /* modals, sheets, drawers */
  --radius-chip:   var(--radius-pill);

  /* ---- Shadows — gentle, warm-neutral ---- */
  --shadow-xs: 0 1px 2px rgba(54, 53, 53, 0.06);
  --shadow-sm: 0 2px 8px rgba(54, 53, 53, 0.10);    /* the theme's card shadow */
  --shadow-md: 0 6px 20px rgba(54, 53, 53, 0.10);
  --shadow-lg: 0 16px 40px rgba(54, 53, 53, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* component shadows — the four the tools actually reach for */
  --shadow-card:   0 2px 8px rgba(54, 53, 53, 0.06);
  --shadow-pop:    0 12px 32px rgba(54, 53, 53, 0.14);   /* dropdowns */
  --shadow-drawer: 0 8px 28px rgba(54, 53, 53, 0.22);
  --shadow-modal:  0 24px 64px rgba(54, 53, 53, 0.28);
  --shadow-fab:    0 4px 14px rgba(54, 53, 53, 0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.4s;

  /* ---- z-index ladder ---- */
  --z-header: 20;
  --z-fab:    30;
  --z-nav:    80;   /* the cross-tool drawer */
  --z-scrim:  90;   /* modals and sheets */
  --z-toast:  100;
}