/* ============================================================
   Hoffer Flow Controls — Effects: shadows, elevation, motion
   ------------------------------------------------------------
   Shadows are cool-tinted (navy-based), never pure black —
   industrial, crisp, never soft/fluffy. Elevation is restrained;
   most surfaces sit on borders, not drop shadows. Motion is
   quick and mechanical: short durations, firm easing, no bounce.
   ============================================================ */

:root {
  /* ---- Shadows (navy-tinted) --------------------------------- */
  --shadow-xs:  0 1px 2px rgba(13, 32, 64, 0.08);
  --shadow-sm:  0 1px 2px rgba(13, 32, 64, 0.10),
                0 2px 6px rgba(13, 32, 64, 0.06);
  --shadow-md:  0 2px 4px rgba(13, 32, 64, 0.10),
                0 8px 20px rgba(13, 32, 64, 0.10);
  --shadow-lg:  0 6px 14px rgba(13, 32, 64, 0.12),
                0 18px 40px rgba(13, 32, 64, 0.14);
  --shadow-xl:  0 20px 60px rgba(8, 22, 40, 0.28);

  /* Inset for sunken/pressed wells */
  --shadow-inset: inset 0 1px 2px rgba(13, 32, 64, 0.12);

  /* Focus ring as a layered shadow */
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* The signature amber accent underline (used under eyebrows,
     active tabs, CTA hover) */
  --accent-underline: var(--rule-accent-w) solid var(--accent);

  /* ---- Motion ------------------------------------------------ */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   180ms;  /* @kind other */
  --dur-slow:   280ms;  /* @kind other */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.3, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);  /* @kind other */
  --ease-mech:  cubic-bezier(0.4, 0, 0, 1);  /* @kind other */

  /* ---- Overlays & scrims ------------------------------------- */
  --scrim-image: linear-gradient(
      180deg,
      rgba(8, 22, 40, 0.20) 0%,
      rgba(8, 22, 40, 0.55) 60%,
      rgba(8, 22, 40, 0.82) 100%);  /* @kind other */
  --scrim-flat:  rgba(8, 22, 40, 0.62);  /* @kind color */

  /* Hairline grid texture for industrial backgrounds */
  --grid-line: rgba(27, 79, 156, 0.06);
}