/* ============================================================
   EFFECTS — shadows, borders, transitions, gradients
   ============================================================ */
:root {
  /* Soft, cool-tinted elevation (shadows lean into the brand blue) */
  --shadow-xs: 0 1px 2px rgba(12, 86, 137, 0.08);
  --shadow-sm: 0 2px 6px rgba(12, 86, 137, 0.10);
  --shadow-md: 0 8px 20px rgba(12, 86, 137, 0.12);
  --shadow-lg: 0 18px 40px rgba(12, 86, 137, 0.16);
  --shadow-pop: 0 10px 0 var(--lime-500);   /* playful "sticker" offset for accents */
  /* Brand-tinted elevation for cards on the twilight bands (RISE DS --shadow-brand) */
  --shadow-brand: 0 12px 28px rgba(6, 47, 77, 0.30), 0 4px 8px rgba(6, 47, 77, 0.20);

  --border-width: 1.5px; /* @kind other */
  --focus-ring: 0 0 0 3px rgba(227, 53, 158, 0.35); /* @kind shadow — magenta */
  --focus-ring-citron: 0 0 0 3px rgba(216, 216, 73, 0.45); /* citron glow, per RISE DS */

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Signature diagonal energy gradient (blue → purple), used on hero/inverse bands */
  --gradient-hero: linear-gradient(135deg, var(--blue-800) 0%, var(--purple-700) 100%);
  --gradient-spark: linear-gradient(90deg, var(--pink-600), var(--lime-500));
  /* Deep twilight band (RISE DS default field) — nav + hero dark moments */
  --gradient-twilight: linear-gradient(150deg, var(--blue-900) 0%, var(--purple-900, #2b2f58) 100%);
}