/* ============================================================
   Hitz DS — _brand-logos.css — logos/wordmarks consumibles por CSS
   Canonical importable CSS. T2 convierte 06_brand en consumible.

   TÉCNICA: background-image sobre los SVG de ../../assets/logos/*.svg.
   A diferencia de los iconos (.ico-*, monocromos y recolorables vía mask),
   los logos son MULTICOLOR y de color FIJO de marca → se usan como imagen
   de fondo, NO se recolorean. El primary lleva la lima de marca; el
   secondary es la versión oscura. Elegir variante según el fondo.

   USO:
     <span class="brand brand-wordmark-combined"></span>
   El tamaño se controla con la ALTURA (height en em o --brand-h, token de
   espaciado). El ancho lo deduce aspect-ratio del viewBox → sin px ni
   distorsión.

   CAPAS:
     @import tokens-all.css → convención de capas (sin tokens de color:
     el color vive dentro del SVG).
   ============================================================ */

@import "../01_tokens/tokens-all.css";

/* Base — cualquier .brand-* hereda esto. Altura controlable; ancho por
   aspect-ratio. height en em → sin px hardcodeado. */
.brand,
[class^="brand-"],
[class*=" brand-"] {
  display: inline-block;
  height: var(--brand-h, 1em);
  width: auto;
  aspect-ratio: var(--brand-ar);
  background: var(--brand) no-repeat center / contain;
}

/* ── Wordmarks (379×175) ───────────────────────────────────── */
.brand-wordmark-combined,
.brand-wordmark-combined-primary {
  --brand: url("../../assets/logos/wordmark-primary-combined.svg");
  --brand-ar: 379 / 175;
}
.brand-wordmark-combined-secondary {
  --brand: url("../../assets/logos/wordmark-secondary-combined.svg");
  --brand-ar: 379 / 175;
}
.brand-wordmark-primary {
  --brand: url("../../assets/logos/wordmark-primary.svg");
  --brand-ar: 379 / 175;
}
.brand-wordmark-secondary {
  --brand: url("../../assets/logos/wordmark-secondary.svg");
  --brand-ar: 379 / 175;
}

/* ── Combination lockups (565×229) ─────────────────────────── */
.brand-combination-primary {
  --brand: url("../../assets/logos/combination-primary.svg");
  --brand-ar: 565 / 229;
}
.brand-combination-primary-background {
  --brand: url("../../assets/logos/combination-primary-background.svg");
  --brand-ar: 565 / 229;
}
.brand-combination-secondary {
  --brand: url("../../assets/logos/combination-secondary.svg");
  --brand-ar: 565 / 229;
}
.brand-combination-secondary-background {
  --brand: url("../../assets/logos/combination-secondary-background.svg");
  --brand-ar: 565 / 229;
}

/* ── Icon marks (229×229) ──────────────────────────────────── */
.brand-icon-primary {
  --brand: url("../../assets/logos/icon-primary.svg");
  --brand-ar: 1 / 1;
}
.brand-icon-secondary {
  --brand: url("../../assets/logos/icon-secondary.svg");
  --brand-ar: 1 / 1;
}