/* Color — raw brand palette + semantic roles (light default, .zenior-dark scope) */
:root{
  /* ---- BRAND PALETTE (canonical brandboard) ---- */
  --zenior-espuma:    #F3EFEC;  /* off-white  — lightest */
  --zenior-arena:     #C8B8A6;  /* warm sand  — bands, tone-on-tone */
  --zenior-jade:      #61AB9E;  /* bright jade — primary accent */
  --zenior-esmeralda: #537D75;  /* deep ashy green — secondary accent */
  --zenior-azul:      #3E4D59;  /* dark slate blue — dark bands */
  --zenior-ceniza:    #3F4042;  /* charcoal — primary text / darkest */

  /* ---- PALETA SITIO 2026 (logo + sitio web) ---- */
  --zenior-noche:     #0C0B09;  /* negro cálido — fondos oscuros, texto */
  --zenior-marfil:    #FBF9F5;  /* marfil — fondo claro, texto sobre oscuro */
  --zenior-crema:     #F3ECE1;  /* crema — texto del logo sobre oscuro */
  --zenior-lino:      #E4D9CB;  /* lino — bandas cálidas, acentos suaves */
  --zenior-oro:       #B49D80;  /* oro arena — anillo del logo, acento principal */
  --zenior-oro-ui:    #B0997C;  /* oro arena para botones y reglas en web */
  --zenior-bronce:    #9A8163;  /* bronce — acento profundo, texto del logo sobre claro */

  /* ---- SEMANTIC ROLES — templates use THESE, not the raw palette ---- */
  --bg:         var(--zenior-espuma);
  --surface:    #FFFFFF;
  --band:       var(--zenior-arena);
  --ink:        var(--zenior-ceniza);
  --ink-soft:   #5C5D5F;
  --muted:      #8C8479;
  --accent:     var(--zenior-jade);
  --accent-deep:var(--zenior-esmeralda);
  --on-accent:  var(--zenior-espuma);
  --hair:       rgba(63,64,66,0.16);
}

/* Dark theme — add class="zenior-dark" to <body> or any block.
   Built on the brand's real darks (Ceniza + Azul profundo). */
/* Tema sitio — class="zenior-sitio": paleta noche/marfil/oro del sitio web. */
.zenior-sitio{
  --bg:         var(--zenior-marfil);
  --surface:    #FFFFFF;
  --band:       var(--zenior-lino);
  --ink:        var(--zenior-noche);
  --ink-soft:   #4A463F;
  --muted:      #7A7064;
  --accent:     var(--zenior-oro);
  --accent-deep:var(--zenior-bronce);
  --on-accent:  var(--zenior-noche);
  --hair:       rgba(12,11,9,0.14);
}
.zenior-sitio.zenior-dark{
  --bg:         var(--zenior-noche);
  --surface:    #1A1815;
  --band:       #1A1815;
  --ink:        var(--zenior-marfil);
  --ink-soft:   var(--zenior-lino);
  --accent:     var(--zenior-oro);
  --accent-deep:var(--zenior-oro);
  --on-accent:  var(--zenior-noche);
  --hair:       rgba(251,249,245,0.18);
}

.zenior-dark{
  --bg:        var(--zenior-ceniza);
  --surface:   #474A4D;
  --band:      var(--zenior-azul);
  --ink:       var(--zenior-espuma);
  --ink-soft:  var(--zenior-arena);
  --muted:     #A89E92;
  --accent:    var(--zenior-jade);
  --accent-deep:var(--zenior-jade);
  --on-accent: var(--zenior-ceniza);
  --hair:      rgba(243,239,236,0.18);
}