/* ==========================================================================
   LexAid — Radii, borders, shadows, gradients & motion
   ========================================================================== */

:root {
  /* ---- Corner radii ----------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;   /* capsule badges / tags */

  /* ---- Borders ---------------------------------------------------------- */
  --border-w:      1px; /* @kind spacing */
  --border-w-thick:2px; /* @kind spacing */

  /* ---- Shadows (soft, cool-tinted — never harsh black) ------------------ */
  --shadow-xs: 0 1px 2px rgba(8,40,73,0.06);
  --shadow-sm: 0 2px 8px rgba(8,40,73,0.08);
  --shadow-md: 0 8px 24px rgba(8,40,73,0.10);
  --shadow-lg: 0 18px 48px rgba(8,40,73,0.14);
  --shadow-teal: 0 12px 32px rgba(93,199,187,0.28);   /* accent lift */

  /* ---- Signature gradients --------------------------------------------- */
  /* The sparkle / accent gradient: blue → purple */
  --grad-spark: linear-gradient(135deg, var(--blue-500) 0%, var(--purple-500) 100%);
  /* Teal → navy, used on dark hero panels */
  --grad-hero:  linear-gradient(160deg, #0c3358 0%, #082849 55%, #061d38 100%); /* @kind other */
  /* Teal → blue, softer band */
  --grad-teal-blue: linear-gradient(120deg, var(--teal-500) 0%, var(--blue-500) 100%);

  /* Corner glows layered onto navy panels (radial "aurora") */
  --glow-teal:   radial-gradient(60% 55% at 30% 0%, rgba(93,199,187,0.32) 0%, rgba(93,199,187,0) 70%); /* @kind other */
  --glow-purple: radial-gradient(55% 50% at 100% 100%, rgba(170,86,231,0.42) 0%, rgba(170,86,231,0) 68%); /* @kind other */

  /* ---- Motion ----------------------------------------------------------- */
  --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:  120ms; /* @kind other */
  --dur-base:  200ms; /* @kind other */
  --dur-slow:  360ms; /* @kind other */

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring-w: 3px; /* @kind other */
  --focus-ring-color: rgba(84,169,241,0.55); /* @kind color */
}