/* ============================================================
   RADIUS, SHADOW, BORDER, MOTION — Supplement Brand Accelerator
   Soft, confident corners. Whisper-quiet shadows (the brand
   leans on hairline borders + whitespace, not heavy elevation).
   ============================================================ */

:root {
  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadow (low, soft, warm-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.06), 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 6px 18px rgba(20, 20, 20, 0.07);
  --shadow-lg: 0 16px 40px rgba(20, 20, 20, 0.10);
  --shadow-xl: 0 28px 70px rgba(20, 20, 20, 0.14);
  --shadow-brand: 0 12px 30px rgba(15, 122, 77, 0.22);

  /* ---- Border widths ---- */
  --border-hair: 1px;     /* @kind other */
  --border-thick: 1.5px;  /* @kind other */
  --border-heavy: 2px;    /* @kind other */

  /* ---- Motion — Brand Principles: quick, purposeful, no bounce ---- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.2, 0.6, 0.2, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.2, 0.6, 0.2, 1);   /* no bounce (Brand Principles) */

  --dur-fast: 120ms;  /* micro — hover, press */
  --dur-base: 200ms;  /* standard — toggles, menus */
  --dur-slow: 320ms;  /* entrance — on scroll */

  --transition-base: all var(--dur-base) var(--ease-out);  /* @kind other */
  --hover-lift: translateY(-2px);  /* @kind other */
  --press-scale: scale(0.98);      /* @kind other */
}