/* Watch Party — color. Primitivos + semánticos. Reglas de uso en readme.md / DESIGN.md */
:root{
  /* fondos (deep carbon) */
  --carbon-950:#0b0c10; /* fondo primario — negro extremo */
  --carbon-900:#121317; /* fondo secundario / bandas alternas */
  --carbon-850:#16181f; /* surface: cards, secciones elevadas */
  --carbon-800:#1a1b20; /* inputs */
  --carbon-700:#343439; /* elevado / borde default */

  /* acento (mint) — ÚNICO acento. Solo accionables. */
  --mint-500:#1ae7b0;
  --mint-400:#3fdb52;
  --mint-soft:rgba(26,231,176,.1);

  /* semántico fijo — no es acento */
  --hype-red:#ff3366;
  --hype-red-2:#ff7a4d;

  /* texto */
  --text-primary:#e3e2e8;
  --text-secondary:#7a8194;
  --text-dimmed:#b3b5b5;
  --text-on-accent:#0b0c10;
  --text-on-dark-high:rgba(255,255,255,.9);
  --text-on-dark-medium:rgba(255,255,255,.7);
  --text-on-dark-low:rgba(255,255,255,.5);
  --text-on-dark-muted:rgba(227,226,232,.4);

  /* bordes */
  --border-default:#343439;
  --border-subtle:rgba(255,255,255,.1);

  /* overlays */
  --overlay-dark:rgba(11,12,16,.95);
  --overlay-card:rgba(22,24,31,.7);
  --overlay-card-light:rgba(22,24,31,.6);
  --overlay-badge:rgba(22,24,31,.9);
  --overlay-live:rgba(255,51,102,.4);
  --overlay-backdrop:rgba(0,0,0,.65);

  --white:#ffffff;
  --black:#000000;

  /* mundo "Aurora" — opcional, un solo bloque de marca por página */
  --aurora-violet:#cfbaff;
  --aurora-navy:#0a0c22;
  --aurora-bg:#130926;
  --aurora-screen:#0c0b1a;
  --aurora-accent-1:#6b17e6;
  --aurora-accent-2:#4dd0ff;
  --aurora-accent-3:#8935ff;

  /* semántico — usar estos en componentes */
  --bg:var(--carbon-950);
  --bg-alt:var(--carbon-900);
  --bg-elevated:var(--carbon-850);
  --surface:var(--carbon-850);
  --surface-input:var(--carbon-800);
  --cta-bg:var(--mint-500);
  --cta-text:var(--text-on-accent);
  --state-active-bg:var(--mint-soft);
  --state-active-border:var(--mint-500);
  --danger:var(--hype-red);
  --text-body:var(--text-primary);
  --text-muted:var(--text-secondary);
  --link:var(--mint-500);
  --link-hover:var(--mint-400);
}
