/* Waah Cocina de Origen — generado desde docs/tokens.json. Cambia los valores aquí o en el JSON y regenera. */

@font-face { font-family: 'Metropolis'; src: url('../fonts/metropolis-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/metropolis-latin-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/metropolis-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/metropolis-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/metropolis-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/metropolis-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Color */
  --surface: #f7f7f7; /* Fondo de página por defecto (Makaaba) */
  --surface-sand: #ebeae6; /* Secciones alternas de día, tarjetas de menú y de visita */
  --surface-raised: #ffffff; /* Tarjetas que flotan sobre surface-sand, lightbox, barra de acciones móvil */
  --ink: #071721; /* Texto principal y titulares sobre surface, surface-sand y surface-raised (15:1 o más) */
  --ink-slate: #515c5a; /* Tinta del logo Waah */
  --cacao: #463939; /* Texto cálido de Makaaba: historias de platillo en itálica y citas sobre surface y surface-sand (9:1) */
  --selva: #124735; /* Verde Makaaba */
  --selva-deep: #032817; /* Secciones de noche: reel, mixología, experiencias, pie */
  --laguna: #1d4843; /* Fondo de foto pendiente y velo sobre imágenes (Makaaba la usa al 79%) */
  --laguna-light: #32746f; /* Punto y texto de estado 'Abierto ahora' sobre surface y surface-sand (4 */
  --olivo: #afa98f; /* Etiquetas en mayúsculas y filetes sobre selva-deep (6 */
  --on-dark: #f7f7f7; /* Texto y logo blanco sobre selva, selva-deep, laguna, achiote y fotos con scrim */
  --achiote: #a8452a; /* Acento de antojo (adición intencional): marca 'Firma', corazón de antojo activo, cifra de rating */
  --achiote-light: #e4a07a; /* El mismo acento en secciones de noche: precios y destacados sobre selva-deep (7 */
  --line: #d6d5cf; /* Filete de 1px entre filas de menú y alrededor de tarjetas sobre superficies claras */
  --line-dark: #2a4a3c; /* Filete de 1px sobre selva-deep y laguna */
  --scrim: #03281799; /* Velo selva-deep al 60% sobre video y fotos para que on-dark se lea */
  --scrim-strong: #032817d9; /* Velo al 85% para texto largo sobre foto y para el fondo del lightbox */

  /* Sombras */
  --shadow-lift: 0 24px 48px -24px #03281766;
  --shadow-bar: 0 -8px 24px -12px #0717214d;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 50px;
  --radius-round: 50%;

  /* Tipografía */
  --font-sans: Metropolis, "Avenir Next", "Century Gothic", system-ui, sans-serif;
}

/* Estilos de texto */
.display-xl { font-family: var(--font-sans); font-size: 96px; line-height: 0.94; font-weight: 500; letter-spacing: -0.02em; }
.display { font-family: var(--font-sans); font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -0.015em; }
.h1 { font-family: var(--font-sans); font-size: 48px; line-height: 1.08; font-weight: 500; }
.h2 { font-family: var(--font-sans); font-size: 32px; line-height: 1.15; font-weight: 500; }
.h3 { font-family: var(--font-sans); font-size: 25px; line-height: 1.2; font-weight: 500; }
.poetic { font-family: var(--font-sans); font-size: 28px; line-height: 1.3; font-weight: 300; font-style: italic; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.33; font-weight: 600; letter-spacing: 0.32em; }
.body-lg { font-family: var(--font-sans); font-size: 19px; line-height: 1.58; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 1.5; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 600; letter-spacing: 0.02em; }
.price { font-family: var(--font-sans); font-size: 17px; line-height: 1.2; font-weight: 600; }
.micro { font-family: var(--font-sans); font-size: 12px; line-height: 1.33; font-weight: 500; letter-spacing: 0.04em; }