/* ============================================================
   eSuite — Effects: shadows, borders, transitions, gradients
   The brand is flat and calm. Elevation comes mostly from
   hairline borders + light grey backgrounds; shadows are
   soft and low. Navy chrome is solid (no shadow). CTAs lift
   on hover via opacity, not large shadows.
   ============================================================ */

:root {
  /* Shadows — soft, cool-tinted, low spread */
  --shadow-xs:  0 1px 2px rgba(10, 26, 47, 0.06);
  --shadow-sm:  0 1px 3px rgba(10, 26, 47, 0.08), 0 1px 2px rgba(10, 26, 47, 0.04);
  --shadow-md:  0 4px 12px rgba(10, 26, 47, 0.10);
  --shadow-lg:  0 12px 28px rgba(10, 26, 47, 0.14);
  --shadow-focus: 0 0 0 2px #fff, 0 0 0 4px var(--navy-800); /* solid primary-blue ring + white gap — clearly visible focus (WCAG 2.4.7) */
  --shadow-focus-soft: 0 0 0 3px rgba(66, 101, 175, 0.30); /* soft blue halo — form controls, where a hard ring would fight the 1.5px border */
  --shadow-focus-on-navy: 0 0 0 2px var(--navy-900), 0 0 0 4px #fff; /* white ring for focus on navy chrome */

  /* Border widths */
  --border-hairline: 0.5px;
  --border-thin:     1px;
  --border-control:  1.5px; /* inputs, outline buttons */
  --border-active:   3px;   /* tab underline, sub-rails */
  --border-nav-rail: 4px;   /* current-page rail on navy nav chrome */

  /* Transitions — quick, no bounce. Calm + functional. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast:   0.12s; /* @kind other */
  --dur-normal: 0.18s; /* @kind other */
  --dur-slow:   0.3s;  /* @kind other */ /* progress-bar fills */

  /* Brand gradients — used sparingly on navy hero / aqua chips */
  --gradient-navy: linear-gradient(135deg, #4265AF 0%, #293F6D 100%); /* @kind color */
  --gradient-aqua: linear-gradient(135deg, #1BB8F1 0%, #00AEEF 100%); /* @kind color */
}