/* ============================================================
   Corrosion Control — Elevation, Borders, Glows
   Shadows are quiet on dark surfaces; depth comes from layered
   fills + hairline borders. Accent "glow" is reserved for
   active/live states and game-themed focus.
   ============================================================ */

:root {
  /* Hairline rings (use as box-shadow inset or border) */
  --ring-subtle: inset 0 0 0 1px var(--border-subtle);
  --ring-default: inset 0 0 0 1px var(--border-default);
  --ring-strong: inset 0 0 0 1px var(--border-strong);

  /* Drop shadows — tuned for dark; subtle and tight */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 6px 18px -4px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 18px 40px -10px rgba(0, 0, 0, 0.60);
  --shadow-xl: 0 32px 70px -16px rgba(0, 0, 0, 0.70);

  /* Popover / menu — combines ring + drop for crisp edges on dark */
  --shadow-pop: 0 0 0 1px var(--border-default), 0 12px 36px -8px rgba(0, 0, 0, 0.66);

  /* Accent glow — game-themed; used on live/active controls & focus */
  --glow-accent: 0 0 0 1px var(--accent-border), 0 0 22px -2px var(--accent-glow);
  --glow-accent-sm: 0 0 14px -2px var(--accent-glow);
  --glow-online: 0 0 12px -1px rgba(54, 199, 128, 0.55);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--accent);
}

[data-theme="light"] {
  --shadow-xs: 0 1px 2px rgba(16, 20, 28, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 20, 28, 0.08);
  --shadow-md: 0 8px 20px -6px rgba(16, 20, 28, 0.12);
  --shadow-lg: 0 20px 44px -12px rgba(16, 20, 28, 0.16);
  --shadow-xl: 0 32px 70px -18px rgba(16, 20, 28, 0.20);
  --shadow-pop: 0 0 0 1px var(--border-default), 0 14px 38px -10px rgba(16, 20, 28, 0.20);
}
