/**
 * Tema global (CSS custom properties).
 *
 * Las custom properties heredan a través del shadow DOM, así que cualquier
 * componente puede usar `var(--bg)` sin re-declarar nada.
 */
:root {
  /* Surfaces */
  --bg:           #0b0f14;
  --panel:        #121823;
  --panel-2:      #0f1520;
  --panel-3:      #0a0e15;

  /* Borders */
  --border:       #1e2a3a;
  --border-hi:    #253245;
  --border-active:#1f6feb;

  /* Text */
  --text:         #e7eef7;
  --text-muted:   #8aa0b5;
  --text-dim:     #d7e2ef;
  --text-on-acc:  #ffffff;

  /* Accents */
  --accent:       #1f6feb;
  --accent-hover: #2570f0;
  --ok:           #25D366;
  --warn:         #F59E0B;
  --err:          #e74c3c;

  /* Bubbles */
  --user-bubble:  #0f2a1a;
  --user-border:  #1f6f43;
  --user-meta:    #b9d9c6;
  --user-name:    #cdebd8;

  --bot-bubble:   #111b2a;
  --bot-border:   #2a3a55;
  --bot-meta:     #a9bed6;
  --bot-name:     #c7d8ee;

  --err-bubble:   #241214;
  --err-border:   #e74c3c;
  --err-meta:     #ffd0d4;
  --err-name:     #ffd0d4;

  /* Charts (alias para componentes que aún usan literales) */
  --chart-blue:   #3b82f6;
  --chart-green:  #25D366;
  --chart-purple: #8B5CF6;
  --chart-orange: #F59E0B;
  --chart-pink:   #EC4899;
  --chart-gray:   #9CA3AF;

  /* Radii / shadows */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --shadow-bubble: 0 1px 0 rgba(0,0,0,.35);
}

/* Compat: alias antiguo `--muted` que ya usa ops-shell.js. */
:root {
  --muted: var(--text-muted);
}

html, body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}