/* ============================================================
   OBSTEC · Elevation, shadow, glow, motion
   On near-black, elevation reads through hairline borders and
   soft black shadows. The brand red appears as a focus/active
   glow — used sparingly, like a status LED.
   ============================================================ */

:root {
  /* ---- Shadows (dark UI) ----------------------------------- */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:    0 4px 14px rgba(0,0,0,0.50);
  --shadow-lg:    0 14px 40px rgba(0,0,0,0.55);
  --shadow-xl:    0 28px 70px rgba(0,0,0,0.62);

  /* Inset hairline that gives surfaces a machined top edge */
  --shadow-edge:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---- Glows (signal red) ---------------------------------- */
  --glow-accent:    0 0 0 1px rgba(227,28,54,0.55), 0 6px 22px rgba(227,28,54,0.30);
  --glow-accent-sm: 0 0 12px rgba(227,28,54,0.45);
  --glow-online:    0 0 10px rgba(47,191,113,0.55);
  --glow-focus:     0 0 0 3px var(--focus-ring-alpha);

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

  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   180ms;  /* @kind other */
  --dur-slow:   260ms;  /* @kind other */

  --transition-control: background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard),
                        color var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-fast) var(--ease-standard);

  /* ---- Z-index --------------------------------------------- */
  --z-base:     0;     /* @kind other */
  --z-sticky:   100;   /* @kind other */
  --z-overlay:  800;   /* @kind other */
  --z-modal:    900;   /* @kind other */
  --z-toast:    1000;  /* @kind other */
}