/* Cardinal Motors · Logo components
 * Componentes: cm-mark, cm-wordmark, cm-lockup, cm-monogram.
 * Los colores se controlan vía variables CSS definidas en tokens.css
 * (--cm-color-mark, --cm-color-name, --cm-color-tag, --cm-color-monogram).
 * El tema se aplica con .cm-theme--dark o .cm-theme--light en un contenedor.
 */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800;1,900&display=swap');

/* ─── Mark (símbolo: doble chevron) ─────────────────────────── */
.cm-mark {
  width: var(--logo-mark-width);
  height: var(--logo-mark-height);
  flex-shrink: 0;
  display: inline-block;
  color: var(--cm-color-mark);
}

.cm-mark__primary {
  fill: currentColor;
}

.cm-mark__secondary {
  fill: currentColor;
  opacity: 0.35;
}

/* ─── Wordmark (CARDINAL + MOTORS) ──────────────────────────── */
.cm-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.95;
  gap: 6px;
}

.cm-wordmark__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: var(--logo-name-size);
  letter-spacing: 0.01em;
  color: var(--cm-color-name);
  margin: 0;
}

.cm-wordmark__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--logo-tag-size);
  letter-spacing: var(--logo-tag-tracking);
  color: var(--cm-color-tag);
  margin: 0;
}

/* ─── Lockup (mark + wordmark, composición horizontal) ──────── */
.cm-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);
}

/* ─── Monogram (CM, para espacios reducidos) ────────────────── */
.cm-monogram {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cm-color-monogram);
  display: inline-block;
  margin: 0;
}

/* ─── Tamaños responsivos del lockup ────────────────────────── */
@media (max-width: 480px) {
  .cm-lockup {
    --logo-name-size: 36px;
    --logo-tag-size: 11px;
    --logo-mark-width: 60px;
    --logo-mark-height: 47px;
    --logo-gap: 14px;
  }
}