/* ============================================
   Tanline — Spacing, radius, shadow, motion
   Soft, rounded, sun-warm. 4px base grid.
   ============================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --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 */
  --space-10:  8rem;      /* 128 */

  /* ---- Radius — generously rounded, pebble-soft ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-pill: 999px;

  /* ---- Shadows — warm, low, diffuse (sun on sand) ---- */
  --shadow-xs:  0 1px 2px rgba(94, 67, 40, 0.08);
  --shadow-sm:  0 2px 8px rgba(94, 67, 40, 0.10);
  --shadow-md:  0 8px 24px rgba(94, 67, 40, 0.12);
  --shadow-lg:  0 18px 48px rgba(94, 67, 40, 0.16);
  --shadow-brand: 0 12px 30px rgba(226, 76, 113, 0.28);

  /* ---- Borders ---- */
  --border-width: 1.5px;
  --border-width-bold: 2.5px;

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1440px;
  --gutter:         var(--space-5);

  /* ---- Motion — gentle, sun-soft easing ---- */
  --ease-out:    cubic-bezier(0.22, 1, 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:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}