/**
 * Tokens de diseño. Los valores de color son una aproximación al diseño de
 * referencia (diseño pantallas/) — reemplazar por los hex exactos de marca
 * cuando estén disponibles, es el único lugar donde hay que tocarlos.
 */
:root {
  /* Colores de marca */
  --color-header: #1c1c1c;
  --color-texto-claro: #ffffff;
  --color-primario: #4FBB8D;
  --color-primario-oscuro: #1f7a54;
  --color-acento: #f5a623;
  --color-precio: #1A6B5F;
  --color-fondo: #d1d1d1;
  --color-superficie: #ffffff;
  --color-borde: #2F8842;
  --color-texto: #222222;
  --color-texto-secundario: #6b6b6b;
  --color-destacado-bg: #111111;
  --color-error: #d64545;

  /* Tipografía */
  --fuente-base: "VegaSB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;

  /* Espaciados */
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 16px;
  --espacio-lg: 24px;
  --espacio-xl: 32px;

  /* Bordes */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;

  /* Alto aproximado del header + botonera fija, usado para scroll-margin y sticky offsets */
  --alto-header: 56px;
  --alto-botonera: 56px;

  --contenedor-max: 900px;
}

@media (min-width: 1024px) {
  :root {
    /* El header crece en desktop (logo 48px + padding vertical md), así que
       el offset sticky de la botonera debe crecer con él. */
    --alto-header: 80px;
  }
}

/* Breakpoints de referencia usados en las media queries de cada componente:
   768px  = tablet / mobile grande
   1024px = desktop
   1280px = desktop grande */