/* ══════════════════════════════════════════════════════════════
   ACOLITA · una marca más de mal-ds
   https://una.red/ds/

   El sistema de la casa dice que la capa 1 (REFERENCIA) es lo único
   que cambia por marca, y que los roles y los componentes se quedan
   igual. Esto es exactamente eso: la referencia de Acolita.

   Debajo va el puente, que conecta los roles del sistema con los
   presets que genera theme.json — así los bloques de Gutenberg y el
   CSS del producto beben del mismo sitio.

   Si mal.css no está cargado, cada var() cae en su literal y todo
   sigue funcionando. La integración no crea una dependencia.
   ══════════════════════════════════════════════════════════════ */

/* ─── 1 · REFERENCIA ──────────────────────────────────────────
   Hereda la expresión de `apps` —app nativa: superficies sólidas,
   barras translúcidas, controles de 52 px, sin hover— y solo cambia
   el color y los neutros. */

:root[data-marca="acolita"]{
  /* Los dos colores salen del logotipo, medidos píxel a píxel sobre
     `acolita-h.png`: el teal es #00B7A1 y el negro #292929.
     El teal no puede llevar texto encima —2,5:1 con blanco—, así que
     se parte en dos como hace el sistema: el relleno usa el mismo tono
     rebajado (5,3:1) y el de marca se queda para el logo, la portada y
     los detalles. */
  --ref-marca:#00796B;
  --ref-marca-2:#006B5D;
  --ref-marca-txt:#00786A;
  --ref-sobre-marca:#ffffff;
  --ref-acento:#33618f;
  --ref-acento-2:#7A5900;

  --ref-n0:#F4F6F5;   /* lienzo: el gris agrupado del fondo */
  --ref-n1:#EAEEED;   /* rebaje */
  --ref-n2:#FFFFFF;   /* superficie: la tarjeta es blanca */
  --ref-n3:#F7F9F9;   /* superficie alterna */
  --ref-t0:#292929;   /* tinta: el negro del logotipo · 14,6:1 */
  --ref-t1:#535A56;   /* secundaria · 7,1:1 */
  --ref-t2:#606A65;   /* terciaria · 5,6:1 */
  --ref-borde-rgb:41,41,41;

  /* Tipografía de la casa: en producto no hay display, todo Inter,
     y las cifras en mono para que columnas y boletos cuadren. */
  --ref-display:var(--ref-texto);
  --ref-peso-display:700;
  --ref-tracking:-.022em;

  /* Forma y materia, de `apps`. */
  --ref-radio:1.2;
  --ref-borde:1px;
  --ref-densidad:1;
  --ref-tap:52px;
  --ref-vidrio:none;
  --ref-vidrio-barra:blur(20px) saturate(180%);
  --ref-relleno-barra:color-mix(in srgb, var(--ref-n2) 78%, transparent);
  --ref-relleno:var(--ref-n2);
  --ref-campo:var(--ref-n1);
  --ref-linea:rgba(var(--ref-borde-rgb),.09);
  --ref-elev-1:0 1px 2px rgba(18,24,22,.05);
  --ref-elev-2:0 8px 28px rgba(18,24,22,.12);
  --ref-fondo:var(--ref-n0);
  --ref-salto:none;            /* en táctil no hay hover */
  --ref-presion:scale(.97);

  --mal-r:18px; --mal-r-s:12px;
  --mal-t-cuerpo:1.0625rem; --mal-t-micro:.8125rem; --mal-t-mini:.75rem;
  --mal-t-caption:.9375rem;
  --mal-t-h4:1.0625rem; --mal-t-h3:1.25rem; --mal-t-h2:1.375rem;
  --mal-t-h1:1.75rem; --mal-t-lede:1.1875rem; --mal-t-display:2.125rem;
}

/* Modo oscuro. El sistema lo separa de la marca con data-tema, así que
   se combinan: data-marca="acolita" data-tema="oscuro". */
@media (prefers-color-scheme: dark){
  :root[data-marca="acolita"]:not([data-tema="claro"]){
    --ref-marca:#4FD9C4;
    --ref-marca-2:#7FE8D6;
    --ref-marca-txt:#4FD9C4;
    --ref-sobre-marca:#00201C;
    --ref-n0:#101413; --ref-n1:#181D1C; --ref-n2:#1B2120; --ref-n3:#151A19;
    --ref-t0:#E4EAE8; --ref-t1:#B0B8B5; --ref-t2:#9AA29F;
    --ref-borde-rgb:228,234,232;
    --ref-elev-1:0 1px 2px rgba(0,0,0,.4);
    --ref-elev-2:0 8px 28px rgba(0,0,0,.55);
  }
}
:root[data-marca="acolita"][data-tema="oscuro"]{
  --ref-marca:#4FD9C4;
  --ref-marca-2:#7FE8D6;
  --ref-marca-txt:#4FD9C4;
  --ref-sobre-marca:#00201C;
  --ref-n0:#101413; --ref-n1:#181D1C; --ref-n2:#1B2120; --ref-n3:#151A19;
  --ref-t0:#E4EAE8; --ref-t1:#B0B8B5; --ref-t2:#9AA29F;
  --ref-borde-rgb:228,234,232;
  --ref-elev-1:0 1px 2px rgba(0,0,0,.4);
  --ref-elev-2:0 8px 28px rgba(0,0,0,.55);
}

/* ─── 2 · PUENTE ──────────────────────────────────────────────
   Los presets de theme.json pasan a salir de los roles del sistema.
   De este modo un cambio en mal-ds llega hasta el último botón de
   Gutenberg sin tocar el tema, y el literal de reserva mantiene el
   sitio en pie si el sistema no está. */

:root{
  --wp--preset--color--primary:              var(--mal-primary, #00796B);
  --wp--preset--color--on-primary:           var(--mal-on-primary, #fff);
  --wp--preset--color--primary-container:    var(--mal-primary-container, #CFF3EC);
  --wp--preset--color--on-primary-container: var(--mal-on-primary-container, #00786A);
  --wp--preset--color--secondary-container:  var(--mal-surface-alt, #EAEEEC);
  --wp--preset--color--on-secondary-container: var(--mal-on-surface, #141817);
  --wp--preset--color--tertiary:             var(--mal-tertiary, #7A5900);
  --wp--preset--color--error:                var(--mal-danger, #a8352c);
  --wp--preset--color--surface:              var(--mal-bg, #F4F6F4);
  --wp--preset--color--surface-container-low: var(--mal-surface-alt, #F7F9F8);
  --wp--preset--color--surface-container:    var(--mal-bg-2, #EAEEEC);
  --wp--preset--color--surface-container-high: var(--mal-bg-2, #E3E9E6);
  --wp--preset--color--surface-bright:       var(--mal-surface, #fff);
  --wp--preset--color--on-surface:           var(--mal-on-surface, #292929);
  --wp--preset--color--on-surface-variant:   var(--mal-on-surface-2, #535A56);
  --wp--preset--color--outline:              var(--mal-on-surface-3, #606A65);
  --wp--preset--color--outline-variant:      var(--mal-outline, rgba(41,41,41,.09));

  --wp--custom--forma--sm:       var(--mal-r-s, 12px);
  --wp--custom--forma--md:       var(--mal-r-s, 12px);
  --wp--custom--forma--lg:       var(--mal-r, 18px);
  --wp--custom--forma--xl:       26px;
  --wp--custom--elevacion--1:    var(--mal-elev-1, 0 1px 2px rgba(18,24,22,.05));
  --wp--custom--elevacion--2:    var(--mal-elev-2, 0 8px 28px rgba(18,24,22,.12));
  --wp--custom--elevacion--3:    var(--mal-elev-2, 0 8px 28px rgba(18,24,22,.12));
  --wp--custom--alto-control:    var(--mal-tap, 52px);

  /* El teal del logotipo. No se lee como texto, pero es el que hace que
     Acolita sea Acolita: el isotipo, las portadas sin foto, los acentos. */
  --acolita-brillo:#00B7A1;
  --acolita-tinta:#292929;
}

/* La tipografía también viene del sistema cuando está. */
body{
  font-family:var(--mal-texto, "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif);
}
.md-num, .ac-num, .ac-boleto-num, .ac-ganador-num, .ac-contador-num,
.ac-cifra b, .ac-meta-cifras b, .ac-prueba code{
  font-family:var(--mal-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,
.ac-ficha h1, .ac-panel h1, .ac-hoja-cab h2, .ac-rifa-tit, .ac-meta-card h2{
  font-family:var(--mal-display, var(--mal-texto, "Outfit", sans-serif));
  letter-spacing:var(--ref-tracking, -.022em);
}