/* =========================================================
   Design tokens — Andacor Cartas
   ---------------------------------------------------------
   Único punto de cambio para paleta, tipografía y espaciado.
   Cada Etapa siguiente (Hero, Categorías, Menu, Bar, Footer)
   consume estas variables — nunca valores hardcodeados.
   ========================================================= */
:root {
  /* ---------- Color: superficies ---------- */
  --color-bg:           #fafaf7;   /* fondo principal de la carta */
  --color-surface:      #ffffff;   /* tarjetas, modales, controles */
  --color-surface-soft: #f1efe9;   /* fondos secundarios sutiles */
  --color-surface-dark: #141312;   /* sección bar / bebestibles */
  --color-surface-darksoft: #1f1d1b;

  /* ---------- Color: tinta (texto) ---------- */
  --color-ink:          #1a1815;   /* texto principal */
  --color-ink-soft:     #4d4943;   /* secundario, descripciones */
  --color-ink-muted:    #8b857b;   /* metadata, counters */
  --color-ink-inverse:  #f5f2ec;   /* texto sobre superficies oscuras */
  --color-ink-inverse-soft: #c9c4ba;
  --color-ink-inverse-muted: #8a857b;

  /* ---------- Color: líneas y bordes ---------- */
  --color-line:         #e7e3da;
  --color-line-strong:  #d0cabd;
  --color-line-inverse: #2c2925;

  /* ---------- Color: acento (placeholder — se ajusta en Etapa 1) ---------- */
  --color-accent:       #1a1815;
  --color-accent-ink:   #fafaf7;

  /* ---------- Tipografía ---------- */
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* La display se cambia en Etapa 1 si decidimos sumar una serif u otra sans */

  /* Escala tipográfica fluida — crece con el viewport entre los valores indicados */
  --fs-2xs: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --fs-xs:  clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --fs-sm:  clamp(0.88rem, 0.85rem + 0.18vw, 0.95rem);
  --fs-md:  clamp(1.00rem, 0.96rem + 0.25vw, 1.10rem);
  --fs-lg:  clamp(1.15rem, 1.08rem + 0.40vw, 1.35rem);
  --fs-xl:  clamp(1.35rem, 1.20rem + 0.75vw, 1.65rem);
  --fs-2xl: clamp(1.65rem, 1.40rem + 1.25vw, 2.15rem);
  --fs-3xl: clamp(2.10rem, 1.65rem + 2.20vw, 3.00rem);
  --fs-4xl: clamp(2.60rem, 1.85rem + 3.75vw, 4.50rem);

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-base:  1.50;
  --lh-loose: 1.75;

  --tracking-tight:  -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.18em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Espaciado (escala 4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Layout ---------- */
  --container-max:    760px;       /* ancho cómodo de lectura mobile-first */
  --container-wide:   1080px;      /* para hero / footer si los queremos más anchos */
  --container-px:     var(--space-5);
  --container-px-lg:  var(--space-8);

  /* ---------- Bordes y formas ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  --border-thin:   1px;
  --border-medium: 2px;

  /* ---------- Sombras ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 18, 16, 0.04);
  --shadow-sm: 0 2px 6px rgba(20, 18, 16, 0.06), 0 1px 2px rgba(20, 18, 16, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 18, 16, 0.08), 0 2px 6px rgba(20, 18, 16, 0.05);
  --shadow-lg: 0 18px 48px rgba(20, 18, 16, 0.14), 0 4px 12px rgba(20, 18, 16, 0.06);

  /* ---------- Movimiento ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   420ms;

  /* ---------- Capas (z-index) ---------- */
  --z-base:    1;
  --z-sticky:  50;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   120;

  /* ---------- Header / controles sticky ---------- */
  --sticky-offset: 0px;  /* se setea desde JS si hay headers extras */
  --nav-h: 68px;         /* alto del nav de categorías */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}