/* =====================================================================
   ROLEA · Rediseño 2026 · app móvil (PWA)
   Se carga tras rolea-tokens.css y después de los :root de cada vista,
   así que redefine con la paleta nueva los nombres que usa la app.
   Los colores temáticos de los minijuegos (pirata, terminal, vidas…) no
   se tocan a propósito.
   ===================================================================== */
:root {
  /* Bordes y realces (antes cian translúcido, ahora menta) */
  --tdn-border: rgba(var(--tdn-accent-2-rgb), .2);
  --tdn-card-hover: rgba(var(--tdn-accent-2-rgb), .1);
  --border-color: rgba(var(--tdn-accent-2-rgb), .2);

  /* Turquesa heredado (#1abc9c / #16a085): en la app es el color de acción
     principal (botones, etiquetas), así que pasa al naranja del acento */
  --tdn-teal: var(--tdn-accent);
  --tdn-teal-dark: #E07D00;
  --tdn-teal-rgb: var(--tdn-accent-rgb);

  /* Tarjetas de conversaciones / comunicaciones */
  --tdn-card-rgb: 13, 45, 56;
  --card-bg: rgba(13, 45, 56, .8);

  /* Colores por serie que llegan del controlador ($colores) */
  --nav-bg: var(--tdn-bg-1);
  --nav-primary: #FFFFFF;
  --nav-secondary: var(--tdn-accent);
  --button-primary: var(--tdn-accent);
  --button-secondary: var(--tdn-accent-2);
  --primary-color: var(--tdn-accent);
  --secondary-color: var(--tdn-bg-2);
}

html, body { background-color: var(--tdn-bg-1); }