/* tokens.css — La marca de Establecimientos La Negra en variables. Única fuente
 * de la identidad visual del portal: base blanco y negro como su logo, con el
 * verde oscuro de su gráfica de remates como acento y el ocre en detalles finos.
 * Los componentes (styles.css) consumen estos tokens; acá no hay layout.
 */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/oswald.woff2') format('woff2');
}

:root {
  /* Color: neutros del logo */
  --negro: #0b0b0b;
  --carbon: #161616;
  --blanco: #ffffff;
  --crema: #f5f3ee;
  --gris-100: #efede7;
  --gris-200: #e3e0d8;
  --gris-300: #cfccc3;
  --gris-400: #a8a49a;
  --gris-500: #7d796f;
  --gris-600: #55524a;
  --gris-700: #33312c;

  /* Acentos: el verde del remate manda; el ocre acompaña con cuentagotas */
  --verde: #1f3d2b;
  --verde-oscuro: #16301f;
  --verde-claro: #2e5741;
  --verde-tenue: #e6ece6;
  --ocre: #b08a3e;
  --ocre-tenue: #f3ead6;
  --rojo: #a33a2a;
  --rojo-tenue: #f6e6e2;

  /* Tipografía: Oswald condensada para la marca y los títulos; sistema para el cuerpo */
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala tipográfica */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 0.9575rem;
  --fs-md: 1.08rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.8rem;
  --fs-2xl: 2.5rem;

  /* Espaciado y forma */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --radio: 10px;
  --radio-sm: 6px;
  --hairline: 1px solid var(--gris-200);
  --sombra: 0 1px 2px rgba(11, 11, 11, 0.05), 0 4px 16px rgba(11, 11, 11, 0.06);
  --sombra-alta: 0 2px 6px rgba(11, 11, 11, 0.08), 0 12px 32px rgba(11, 11, 11, 0.12);

  /* Semánticos de la app */
  --fondo: var(--crema);
  --superficie: var(--blanco);
  --tinta: var(--negro);
  --tinta-suave: var(--gris-600);
  --tinta-tenue: var(--gris-500);
  --primario: var(--verde);
  --primario-hover: var(--verde-claro);
}