/* ============================================================
   SXTN OS · Effects — radii, borders, shadows, glow, motion
   The control-room look: hairline borders, soft panel shadows,
   accent/LED glows, and one motion signature (ledpulse).
   ============================================================ */
:root {
  /* ---- Corner radii ---- */
  --r-xs:   5px;    /* segmented cells, inner chips     */
  --r-sm:   7px;    /* buttons, segmented control       */
  --r-md:   9px;    /* nav items, small panels          */
  --r-lg:   12px;   /* cards, panels (default)          */
  --r-xl:   16px;   /* hero panels, brand mark          */
  --r-pill: 999px;  /* filter chips, status dots        */

  /* ---- Borders ---- */
  --bw-hair: 1px;
  --border-card:    1px solid var(--border);
  --border-control: 1px solid var(--border-hi);
  --accent-edge:    3px;    /* left-accent bar on entity cards */

  /* ---- Shadows ---- */
  --shadow-panel: 0 1px 0 rgba(0,0,0,.3);
  --shadow-pop:   0 12px 26px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.10);
  --shadow-drawer: 0 24px 60px -20px rgba(0,0,0,.85);

  /* ---- Glows (the signature light) ---- */
  --glow-accent: 0 0 10px var(--accent);
  --glow-led:    0 0 8px currentColor;   /* @kind shadow */
  --glow-mark:   0 0 30px -4px rgba(var(--accent-rgb), .7);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.2,.7,.3,1);   /* @kind other */
  --ease-std:   ease;   /* @kind other */
  --dur-fast:   .14s;   /* @kind other */
  --dur-med:    .16s;   /* @kind other */
  --dur-pulse:  2.4s;          /* @kind other */

  /* Hover/press conventions (apply as filter/transform):
     hover  → filter: brightness(1.13–1.35); lift translateY(-1px..-3px)
     press  → no scale; selected = --raised bg + accent text
     The one looping animation allowed on content is ledpulse. */
}

/* The motion signature — a slow pulse meaning "live runtime". */
@keyframes ledpulse { 0%,100% { opacity: 1 } 50% { opacity: .38 } }

/* Brand mark idle orbit (decorative, brand surfaces only). */
@keyframes orbit { to { transform: rotate(360deg) } }