/* ============================================================
   MEDALLO VIP — TOKENS DE MARCA (blanco y negro, estilo Uber)
   ------------------------------------------------------------
   Fuente única de la identidad. Se enlaza ANTES del <style> de
   cada página; las páginas ya no declaran su propio --accent /
   --brand / --brand-orange / --brand-color: los heredan de aquí.

   - --ink            : tinta principal (la marca). Negro sobre claro.
   - --on-ink         : color del texto/icono encima de la tinta.
   - --brand-action   : ROJO, acento SECUNDARIO. Solo para:
                        · acciones destructivas o de alerta
                          (borrar, reportar, bloquear, cancelar)
                        · estado EN VIVO / LIVE
                        · badges/globos de no leídos y notificaciones
                        · botones de pago/recarga y participar en evento
   No usar --brand-action para nada más.
   ============================================================ */

:root {
  /* Tinta */
  --ink: #111111;
  --on-ink: #FFFFFF;

  /* Escala de grises derivada (útil para bordes/estados) */
  --ink-90: rgba(17, 17, 17, .90);
  --ink-60: rgba(17, 17, 17, .60);
  --ink-30: rgba(17, 17, 17, .30);
  --ink-12: rgba(17, 17, 17, .12);

  /* Acento secundario (rojo). NO es la marca. */
  --brand-action: #D91C1C;
  --brand-action-dark: #a71515;
  --on-brand-action: #FFFFFF;

  /* --- Alias de compatibilidad ---------------------------------
     Las páginas heredadas pintan con estos nombres. Apuntan a la
     tinta para que todo quede en blanco y negro sin reescribir
     cada regla CSS del proyecto. */
  --brand: var(--ink);
  --accent: var(--ink);
  --brand-orange: var(--ink);
  --brand-color: var(--ink);
}

/* Páginas que se pintan sobre fondo oscuro (feed, perfil, chat…):
   llevan class="dark" en el <html>. La tinta se invierte y la marca
   pasa a blanco (botón blanco, texto negro — estilo Uber en oscuro).
   Es explícito a propósito: NO se deriva del sistema operativo,
   porque las páginas claras (recargar, checkout, legales) romperían
   si el SO está en modo oscuro. */
:root.dark,
.dark,
html[data-theme="dark"] {
  --ink: #FFFFFF;
  --on-ink: #111111;
  --ink-90: rgba(255, 255, 255, .90);
  --ink-60: rgba(255, 255, 255, .60);
  --ink-30: rgba(255, 255, 255, .30);
  --ink-12: rgba(255, 255, 255, .12);
}

/* Forzado al revés, para páginas claras dentro de un SO oscuro. */
:root.light,
.light,
html[data-theme="light"] {
  --ink: #111111;
  --on-ink: #FFFFFF;
  --ink-90: rgba(17, 17, 17, .90);
  --ink-60: rgba(17, 17, 17, .60);
  --ink-30: rgba(17, 17, 17, .30);
  --ink-12: rgba(17, 17, 17, .12);
}

/* Modo automático opt-in: <html class="auto"> sigue al sistema. */
@media (prefers-color-scheme: dark) {
  :root.auto,
  .auto {
    --ink: #FFFFFF;
    --on-ink: #111111;
    --ink-90: rgba(255, 255, 255, .90);
    --ink-60: rgba(255, 255, 255, .60);
    --ink-30: rgba(255, 255, 255, .30);
    --ink-12: rgba(255, 255, 255, .12);
  }
}
