/*
 * ESTILO TAHE — EL SITIO ÚNICO (18-oct-2026, base Zona Barber).
 * Letra, tamaños y forma de TODAS las herramientas conectadas (fuera de los entornos de gestión y de Styling Lab).
 * Cambiar algo AQUÍ = cambia en todas a la vez:
 *   · Pantallas Next: lo usa cssEstiloTahe (src/modules/plataforma/ui/estilo-comun.ts); se carga en el layout.
 *   · Páginas en iframe (estáticas): cargan /assets/css/estilo-tahe-iframe.css (este + las fuentes de la casa).
 * Los COLORES no van aquí: los pone la franja de cada herramienta (--franja-osc, --franja-tono, --franja-claro…).
 * Va en :root (para las estáticas, que ponen la letra en <html>) y en body (en las pantallas Next las fuentes de la casa,
 * --font-*, viven en el body: ahí se recalcula con ellas).
 */
:root, body {
  /* Letras */
  --t-letra-titulo: var(--font-display, 'Archivo Black'), 'Archivo', system-ui, sans-serif;
  --t-letra-texto: var(--font-sans, 'Archivo'), system-ui, sans-serif;
  --t-letra-etiqueta: var(--font-mono, 'JetBrains Mono'), ui-monospace, monospace;

  /* Etiquetas pequeñas (kicker, «VÍDEO 01», «15 MIN»…): mono en mayúsculas */
  --t-etiqueta-tamano: 9.5px;
  --t-etiqueta-espaciado: .12em;

  /* Pestañas en pastilla */
  --t-pestana-tamano: 13px;
  --t-pestana-peso: 700;
  --t-pestana-alto: 38px;
  --t-pestana-radio: 100px;

  /* Chips que se pulsan o informan («60 tonos», sugerencias…): letra normal, no mono */
  --t-chip-tamano: 12px;
  --t-chip-peso: 600;

  /* Tarjetas */
  --t-tarjeta-radio: 13px;
  --t-tarjeta-borde: #d4d4d4;
  --t-tarjeta-raya: 3px;
  --t-titulo-tarjeta-tamano: 14.5px;
  --t-titulo-tarjeta-peso: 800;
  --t-texto-tarjeta-tamano: 12.5px;

  /* Textos y títulos */
  --t-texto-tamano: 13.5px;
  --t-titulo-seccion-tamano: 21px;

  /* Botones y toque */
  --t-boton-radio: 12px;
  --t-toque: 44px;
}

/*
 * Pantallas hechas con clases de Tailwind (font-display / font-sans / font-mono): la barra común de la herramienta marca la
 * página con body.t-conectada y aquí su letra pasa a seguir este archivo. Las que se quedan TAL CUAL (Gastos/Tarjetas,
 * Mi Ruta, Informes de uso, Promo Amazon, Gestahe/COSMET/OCEAN) y los entornos de gestión no llevan la marca.
 */
body.t-conectada { font-family: var(--t-letra-texto); }
body.t-conectada .font-sans { font-family: var(--t-letra-texto); }
body.t-conectada .font-display { font-family: var(--t-letra-titulo); }
body.t-conectada .font-mono { font-family: var(--t-letra-etiqueta); }