/* ============================================================
   Hexagon — Elevation & motion
   ------------------------------------------------------------
   Hexagon is flat and geometric. Shadows are subtle and neutral
   (no coloured glows). Motion is precise and calm — short, eased
   transitions; no bounces, no decorative loops.
   ============================================================ */

:root {
  /* ---- Shadows — neutral, low-spread ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(0, 40, 76, 0.08);
  --shadow-md:  0 2px 8px rgba(0, 40, 76, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 40, 76, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 40, 76, 0.16);

  /* Focus ring — uses brand hue (sky by default) */
  --focus-ring: 0 0 0 3px rgba(1, 173, 255, 0.40);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);   /* @kind other */

  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
}