/* Loco Bins — design tokens (A1 "Pregón Pleno").
   Rebrand path: change these values and the logo files. Nothing else needs to change. */
:root {
  /* Colour */
  --rojo: #E01B22;         /* red grounds; white text 4.83:1 */
  --rojo-texto: #C8141B;   /* small red text on papel/blanco 5.31:1 */
  --tinta: #121212;        /* text, black sections */
  --mango: #FFCC33;        /* accent; on red only at 24px+ (3.2:1) */
  --papel: #F7F3EA;        /* light sections */
  --blanco: #FFFFFF;
  --texto-suave: #5C574F;  /* notes on papel 6.47:1 */
  --linea: #CFC8BA;        /* hairlines, never text */
  --linea-oscura: #3A3835; /* hairlines on tinta */
  --mapa: #E7E0D2;

  /* Type */
  --font-display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Space (px scale: 4 8 12 16 24 32 40 48 64 72 96 112) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 40px; --s8: 48px; --s9: 64px; --s10: 72px; --s11: 96px; --s12: 112px;

  /* Layout (mobile first; overridden at breakpoints below) */
  --margen: 20px;
  --gutter: 8px;
  --columnas: 4;
  --seccion: 44px;
  --contenido-max: 1280px;
  --header-alto: 64px;
  --barra-alto: 76px;

  --toque: 48px;            /* minimum tap target */
  --transicion: 150ms ease;
}

@media (min-width: 640px) {
  :root { --margen: 40px; --gutter: 16px; --columnas: 8; --seccion: 72px; --header-alto: 76px; }
}
@media (min-width: 1024px) {
  :root { --margen: 80px; --gutter: 24px; --columnas: 12; --seccion: 112px; --header-alto: 88px; }
}