/* ==========================================================================
   CauseLogic — Radii, borders, shadows, motion
   "Rounded cards with soft shadows" · "subtle animations" (Brand Board)
   ========================================================================== */

:root {
  /* ---- Radii (px) — matches Stratum live values ------------------------ */
  --radius-xs:    6px;    /* small buttons, inputs, micro-cards  */
  --radius-sm:    8px;    /* buttons, inputs                     */
  --radius-md:    10px;   /* nav cards, panels                   */
  --radius-lg:    12px;   /* primary cards, dialogs              */
  --radius-xl:    16px;   /* marketing cards / hero panels       */
  --radius-pill:  9999px; /* pills, badges, avatars              */

  /* ---- Border widths ---------------------------------------------------- */
  --border-thin:  1px;
  --border-card:  1.5px;  /* module / accent cards (Stratum)     */

  /* ---- Shadows — soft, low-contrast, cool ------------------------------ */
  --shadow-xs:  0 1px 2px rgba(30, 42, 51, 0.06);
  --shadow-sm:  0 2px 8px rgba(30, 42, 51, 0.06);
  --shadow-md:  0 4px 12px rgba(30, 42, 51, 0.08);
  --shadow-lg:  0 6px 20px rgba(30, 42, 51, 0.10);
  --shadow-xl:  0 12px 32px rgba(30, 42, 51, 0.12);
  --shadow-focus: 0 0 0 3px rgba(62, 126, 159, 0.22);   /* primary ring */

  /* ---- Gradients — minimal, primary → secondary blue ------------------- */
  --gradient-brand: linear-gradient(135deg, #3E7E9F 0%, #6CB8CB 100%); /* @kind color */
  --gradient-deep:  linear-gradient(160deg, #214E67 0%, #2A5468 60%, #336781 100%); /* @kind color */
  --gradient-wash:  linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%); /* @kind color */

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:     0.15s;  /* @kind other */
  --dur-base:     0.2s;   /* @kind other */
  --dur-slow:     0.25s;  /* @kind other */
  --lift-hover:   translateY(-2px); /* @kind other */
}