/* ── Effects: radii, shadows, borders, motion ───────────────────────
   Soft rounded corners, gentle layered shadows on white cards, and a
   signature left-accent border on content cards. Motion is calm: ease-out
   fades and small lifts on hover — never bouncy on UI chrome. */

:root {
  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;   /* default card */
  --radius-lg: 16px;   /* feature / event card */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
  --shadow-teal: 0 4px 24px rgba(0, 151, 167, 0.12), 0 1px 6px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px var(--teal-glow);

  /* Borders */
  --border-hairline: 1px solid var(--line);
  --border-accent-width: 4px; /* left accent on content cards */

  /* The signature top accent bar / gradient (logo spectrum) */
  --accent-bar: linear-gradient(
    90deg,
    var(--fig-sage), var(--teal-500), var(--coral-500),
    var(--lavender-500), var(--gold-500), var(--fig-sage)
  );
  --teal-banner: linear-gradient(135deg, var(--teal-500), var(--teal-700));

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 0.2s; /* @kind other */
  --dur-med: 0.3s; /* @kind other */
  --dur-slow: 0.7s; /* @kind other */
  --hover-lift: -4px; /* @kind other */
}