/* Cardinal Motors · Design Tokens
 * Colores de marca: dos (negro + amarillo). El blanco es color de
 * tipografía de máximo contraste, no color de marca. Ver spec §4.
 */

:root {
  /* Colores de marca */
  --cardinal-black: #0A0A0A;
  --cardinal-yellow: #FFD60A;

  /* Color de tipografía de máximo contraste sobre fondo oscuro */
  --cardinal-white: #FFFFFF;

  /* Fondo claro de showcase (gris muy claro para reducir fatiga visual) */
  --cardinal-bg-light: #F5F5F5;

  /* Tipografía */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;

  /* Escala del logo a tamaño base (ver spec §3.3) */
  --logo-name-size: 54px;
  --logo-tag-size: 16px;
  --logo-mark-width: 90px;
  --logo-mark-height: 70px;
  --logo-gap: 22px;
  --logo-tag-tracking: 0.42em;

  /* Tema oscuro (default) — colores aplicados por componente */
  --cm-color-mark: var(--cardinal-yellow);
  --cm-color-name: var(--cardinal-white);
  --cm-color-tag: var(--cardinal-yellow);
  --cm-color-monogram: var(--cardinal-yellow);
}

/* Tema claro — sobreescribe los colores cuando se aplica .cm-theme--light */
.cm-theme--light {
  --cm-color-mark: var(--cardinal-black);
  --cm-color-name: var(--cardinal-black);
  --cm-color-tag: var(--cardinal-black);
  --cm-color-monogram: var(--cardinal-black);
}

/* Tema oscuro explícito — útil cuando se anida en una sección clara */
.cm-theme--dark {
  --cm-color-mark: var(--cardinal-yellow);
  --cm-color-name: var(--cardinal-white);
  --cm-color-tag: var(--cardinal-yellow);
  --cm-color-monogram: var(--cardinal-yellow);
}