/* Barullo · la web del barulleiro: tokens del sistema y fuentes.
 *
 * Los tokens son los de `disenno/tokens/tokens.css`, copiados tal cual
 * (se regeneran con `python3 disenno/generar-tokens.py`; si cambian,
 * se vuelven a copiar aqui). Las fuentes son las del sistema, en TTF:
 * Caddy las sirve comprimidas. La italica no se usa y no se carga.
 */
@font-face { font-family: "Gabarito"; src: url("/fuentes/Gabarito-Variable.ttf") format("truetype-variations"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fuentes/HankenGrotesk-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fuentes/DMMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fuentes/DMMono-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

/* Tokens del sistema visual de Barullo.
 * GENERADO por disenno/generar-tokens.py desde disenno/_ds/.
 * No editar a mano: los cambios se hacen en el design system.
 */
:root {

  /* colores.css */
  --color-fucsia: #D61A7C;
  --color-fucsia-oscuro: #A4115E;
  --color-mandarina: #FF7A1A;
  --color-amarillo: #FFC93C;
  --color-verde: #0B7A50;
  --color-tinta: #1A0A16;
  --color-tinta-suave: #4A3640;
  --color-gris: #6B5560;
  --color-muro: #F6EDE6;
  --color-crema: #FFF9F0;
  --color-blanco: #FFFFFF;
  --color-linea: #E4D5CC;
  --color-mejilla: #F08AAE;
  --corona-ambar-1: #FDE294;
  --corona-ambar-2: #FED468;
  --corona-ambar-3: #FEC73C;
  --corona-ambar-4: #E19B09;
  --corona-ambar-5: #DC9401;
  --corona-naranja-1: #FEBC8F;
  --corona-naranja-2: #FE9C59;
  --corona-naranja-3: #FF7C24;
  --corona-naranja-4: #CC5505;
  --corona-naranja-5: #C44F00;
  --corona-verde-1: #9ADFC2;
  --corona-verde-2: #64C39C;
  --corona-verde-3: #2EA777;
  --corona-verde-4: #138258;
  --corona-verde-5: #0F7C53;
  --corona-azul-1: #B9D4EE;
  --corona-azul-2: #8AB2DC;
  --corona-azul-3: #5B8FC9;
  --corona-azul-4: #26578C;
  --corona-azul-5: #1E4E82;
  --color-primary: var(--color-fucsia);
  --color-primary-strong: var(--color-fucsia-oscuro);
  --color-background: var(--color-crema);
  --color-surface: var(--color-blanco);
  --color-surface-alt: var(--color-muro);
  --color-text: var(--color-tinta);
  --color-text-muted: var(--color-tinta-suave);
  --color-text-subtle: var(--color-gris);
  --color-border: var(--color-tinta);
  --color-border-soft: var(--color-linea);
  --color-warning: var(--color-mandarina);
  --color-alert: var(--color-amarillo);
  --color-success: var(--color-verde);
  --trama-espera: repeating-linear-gradient(135deg, #F6EDE6 0 6px, #E4D5CC 6px 12px);

  /* tipografia.css */
  --fuente-titular: "Gabarito", system-ui, sans-serif;
  --fuente-texto: "Hanken Grotesk", system-ui, sans-serif;
  --fuente-mono: "DM Mono", ui-monospace, monospace;
  --texto-turno: clamp(96px, 18vw, 160px);
  --texto-turno-medio: 92px;
  --texto-turno-fila: 26px;
  --texto-titular: 34px;
  --texto-titular-compacto: 30px;
  --texto-subtitulo: 22px;
  --texto-accion: 20px;
  --texto-cuerpo: 17px;
  --texto-cuerpo-compacto: 16px;
  --texto-apoyo: 14px;
  --texto-etiqueta: 11px;
  --peso-turno: 900;
  --peso-titular: 800;
  --peso-accion: 700;
  --peso-medio: 600;
  --peso-texto: 400;
  --interletra-turno: -0.05em;
  --interletra-titular: -0.02em;
  --interletra-etiqueta: 0.12em;
  --interlinea-turno: 0.82;
  --interlinea-titular: 1.1;
  --interlinea-texto: 1.5;

  /* forma.css */
  --borde: 2px;
  --borde-color: var(--color-tinta);
  --radio-pastilla: 999px;
  --radio-tarjeta-grande: 32px;
  --radio-tarjeta: 28px;
  --radio-caja: 24px;
  --radio-fila: 20px;
  --radio-campo: 16px;
  --radio-chip: 14px;
  --sombra: 0 4px 0 var(--color-tinta);
  --sombra-hundida: 0 2px 0 var(--color-tinta);
  --toque-minimo: 44px;
  --toque-local: 56px;
  --toque-principal: 64px;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 22px;
  --espacio-6: 28px;
  --espacio-7: 36px;
  --espacio-8: 48px;

  /* movimiento.css */
  --duracion-toque: 80ms;
  --duracion-corta: 280ms;
  --duracion-fundido: 380ms;
  --duracion-transicion: 620ms;
  --curva-transicion: cubic-bezier(0.4, 0, 0.2, 1);
  --curva-fundido: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Base del sistema (`_ds/tokens/base.css`). */
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--fuente-texto);
  font-size: var(--texto-cuerpo);
  line-height: var(--interlinea-texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-strong); }
::selection { background: var(--color-alert); color: var(--color-tinta); }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }