/* ============================================================
   JMR — SPACING, RADIUS, SHADOWS, LAYOUT TOKENS
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --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.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */

  /* ---- Border radius (brand spec) ---- */
  --radius-sm:  8px;   /* inputs, chips, tags */
  --radius-md:  12px;  /* buttons, cards */
  --radius-lg:  20px;  /* containers, sections */
  --radius-xl:  28px;  /* hero banners, featured events */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Elevation / shadows ----
     Light, warm-neutral shadows. The brand leans on the ivory
     surface to separate content, so shadows stay soft. */
  --shadow-1: 0 1px 2px rgba(27, 41, 107, 0.06),
              0 1px 3px rgba(27, 41, 107, 0.08);                 /* standard cards */
  --shadow-2: 0 4px 8px rgba(27, 41, 107, 0.08),
              0 2px 4px rgba(27, 41, 107, 0.06);                 /* dropdowns, modals */
  --shadow-3: 0 12px 28px rgba(27, 41, 107, 0.14),
              0 6px 12px rgba(27, 41, 107, 0.10);                /* priority elements */
  --shadow-gold: 0 6px 18px rgba(228, 186, 66, 0.34);           /* gold CTA glow */

  /* ---- Focus ---- */
  --focus-width: 3px; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px; /* @kind spacing */
  --content-max:   680px;   /* @kind spacing */
  --app-max:       420px;   /* @kind spacing */
  --header-h:      64px;     /* @kind spacing */
  --bottomnav-h:   72px;     /* @kind spacing */

  /* ---- Motion ----
     Gentle, reverent. No bounce, no playful overshoot. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --dur-fast:      140ms; /* @kind other */
  --dur-base:      220ms; /* @kind other */
  --dur-slow:      360ms; /* @kind other */
}

/* Dark mode: deepen shadows so elevation still reads on navy */
[data-theme="dark"] {
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 14px 34px rgba(0, 0, 0, 0.50);
  --shadow-gold: 0 6px 20px rgba(228, 186, 66, 0.28);
}