/* ==========================================================================
   TEMA CLARO — se activa con <html data-theme="light">.
   ========================================================================== */

:root[data-theme='light'] {
  --color-bg: #f5f6fa;
  --color-bg-elevated: #ffffff;
  --color-bg-elevated-2: #eef0f5;
  --color-border: #dfe2ea;
  --color-text: #1b1e27;
  --color-text-muted: #5b6072;

  --color-primary: #6c5ce7;
  --color-primary-hover: #5b4bd6;

  --color-accent: #00b386;
  --color-danger: #e0405c;
  --color-warning: #d9900f;
  --color-online: #27ae60;

  --color-overlay: rgba(27, 30, 39, 0.45);
}