/* Vessa & Humo — design tokens
   Colores tomados del Manual de marca / App_Panaderia (misma marca). */
:root {
  /* Paleta de marca */
  --marron: #5C2A12;
  --vino: #800D0D;
  --vino-oscuro: #5C0A0A;
  --ocre: #DAA04C;
  --beige: #DCC189;
  --crema: #F1EEE7;
  --papel: #FBF9F4;
  --tinta: #33180B;
  --linea: #E3D8C6;
  --humo: #8A7462;

  --ok: #4B6B3A;
  --alerta: #B8791C;
  --peligro: #800D0D;

  --sombra-sm: 0 1px 2px rgba(51, 24, 11, .06), 0 8px 24px rgba(51, 24, 11, .06);
  --sombra-lg: 0 4px 12px rgba(51, 24, 11, .08), 0 24px 48px rgba(51, 24, 11, .12);

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Escala de espaciado (base 8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;

  /* Gutter lateral estándar de TODA la página (un solo lugar para ajustarlo). */
  --gutter: 24px;

  /* Padding vertical de las secciones — el único punto de control del aire
     entre bloques. En móvil va 20% más compacto que la escala base porque ahí
     el espacio se leía como hueco vacío; base.css lo restaura en ≥768px. */
  --section-y: 51px;        /* 64 × 0.8 */
  --section-y-tight: 26px;  /* 32 × 0.8 */

  /* Duraciones de transición (respetadas/anuladas por prefers-reduced-motion en base.css) */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Breakpoints de referencia (no consumibles directo por CSS vars en media queries,
   documentados aquí para mantener consistencia con JS y comentarios):
   --bp-mobile: 375px
   --bp-tablet: 768px
   --bp-desktop: 1024px
   --bp-wide: 1440px
*/