@font-face {
  font-family: 'Overused Grotesk';
  src: url('/fonts/OverusedGrotesk-VF.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --crema: #EDE4D3;      /* fondo de la marca */
  --papel: #F8F3EA;      /* tarjetas */
  --tinta: #231F1C;
  --tinta-2: #6B625A;    /* texto secundario */
  --linea: #D9CCB6;
  --panel: #DACCB2;      /* fondo de cada columna del tablero */
  --panel-activo: #CBBA9B;
  --rojo: #CA2B3A;       /* marca; en la operación queda reservado para novedades */
  --verde: #2E6B45;
  --verde-fondo: #DCE8DC;
  --ambar: #8F5508;
  --ambar-fondo: #F3E0BE;
  --radio: 10px;
  --sombra: 0 1px 0 rgba(35, 31, 28, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--crema);
  color: var(--tinta);
  font: 400 15px/1.4 'Overused Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }