/*
 * Tokens de la web de ginomolinari.com con la identidad de marca v0.2.
 * Los valores salen de brand/tokens.css (las variables --gm-*, que el build
 * publica en /marca/tokens.css junto con la carga de Google Fonts); aqui solo
 * se asigna cada papel de la web a un token de marca. estilos.css solo usa
 * estas variables. Cambiar la marca = cambiar brand/ o este fichero, no el HTML.
 */

:root {
  /* Tipografia: Atkinson para leer, Bricolage condensada para titular, Martian Mono para lo tecnico */
  --fuente-texto: var(--gm-font-text);
  --fuente-titulos: var(--gm-font-display);
  --fuente-mono: var(--gm-font-mono);
  --ajustes-titulos: var(--gm-display-settings);
  --peso-texto: 400;
  --peso-medio: 700;
  --peso-fuerte: 700;
  --peso-mono: 500;
  --peso-titulos: var(--gm-display-weight);
  --tracking-titulos: var(--gm-display-tracking);
  --tracking-mono: -0.01em;
  --tam-mini: var(--gm-size-12);
  --tam-pequeno: var(--gm-size-14);
  --tam-texto-sec: var(--gm-size-16);
  --tam-base: var(--gm-size-18);
  --tam-entradilla: var(--gm-size-21);
  --tam-h3: var(--gm-size-24);
  --tam-h2: clamp(var(--gm-size-36), 1.6rem + 1.8vw, var(--gm-size-48));
  --tam-h1: clamp(var(--gm-size-48), 2rem + 3vw, var(--gm-size-72));
  --tam-portada: clamp(var(--gm-size-48), 1.4rem + 5.2vw, var(--gm-size-96));
  --tam-correo: clamp(var(--gm-size-24), 1rem + 3vw, var(--gm-size-48));
  --interlineado: 1.55;
  --interlineado-ajustado: 1.35;
  --interlineado-titulos: 0.95;
  --medida: 34em; /* ~65 caracteres por linea */
  --medida-corta: 26em;

  /* Logotipo A1 (1386 x 200): minimo 140 px de ancho */
  --logo-alto: 1.5rem;
  --logo-alto-grande: 1.875rem;

  /* Color: tema claro de la marca y bloques de "monitor" en tinta */
  --color-fondo: var(--gm-bg);
  --color-superficie: #ffffff;
  --color-texto: var(--gm-fg);
  --color-texto-suave: color-mix(in srgb, var(--gm-ink) 76%, var(--gm-paper));
  --color-borde: color-mix(in srgb, var(--gm-ink) 14%, transparent);
  --color-borde-fuerte: var(--gm-ink);
  --color-acento: var(--gm-button-bg);
  --color-acento-texto: var(--gm-button-fg);
  --color-acento-hover: var(--gm-button-hover);
  --color-enlace: var(--gm-link);
  --color-foco: var(--gm-tomato-deep);
  --color-etiqueta: var(--gm-accent-text);
  --color-prueba: var(--gm-accent-text);
  --color-resalte: var(--gm-cheese);
  --color-monitor: var(--gm-ink);
  --color-monitor-texto: var(--gm-paper);
  --color-monitor-suave: color-mix(in srgb, var(--gm-paper) 72%, var(--gm-ink));
  --color-monitor-enlace: var(--gm-blue-soft);
  --color-monitor-foco: var(--gm-cheese);
  --color-borde-monitor: color-mix(in srgb, var(--gm-paper) 22%, var(--gm-ink));
  --color-fosforo: var(--gm-phosphor);
  --color-cursor: var(--gm-tomato);
  --color-queso: var(--gm-cheese);
  --franja: var(--gm-stripes);
  --franja-alto: 6px;

  /* Espaciado (base 4 px) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 1rem;
  --esp-4: 1.5rem;
  --esp-5: 2.5rem;
  --esp-6: 4rem;
  --esp-7: 6rem;
  --seccion: clamp(var(--esp-6), 3rem + 4vw, var(--esp-7));

  /* Forma */
  --radio: var(--gm-radius-md);
  --radio-pequeno: var(--gm-radius-sm);
  --radio-monitor: var(--gm-radius-key);
  --radio-boton: var(--gm-radius-pill);
  --borde: 1px solid var(--color-borde);
  --sombra-pixel: 4px 4px 0 var(--gm-ink);
  --sombra-pixel-alta: 6px 6px 0 var(--gm-ink);
  --sombra-pixel-grande: 8px 8px 0 var(--gm-ink);
  --sombra-pixel-acento: 8px 8px 0 var(--gm-tomato);
  --toque-min: 44px; /* tamano tactil minimo */

  /* Movimiento */
  --transicion: 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --entrada: 520ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Maquetacion */
  --ancho-max: 74rem;
  --margen-lateral: clamp(1rem, 4vw, 2.5rem);
  --columna-min: 16rem;
  --proporcion-imagen: 1 / 1;
  --ancho-firma: 30rem;
  --ancho-monitor: 26rem;
}