/* ===================================================================
 * TOKENS — variables CSS globales del tema
 * Cargado primero en la cascada (ITCSS layer 1).
 * Ningún archivo posterior define colores o tamaños hardcoded:
 * todo pasa por var(--horreo-*).
 * =================================================================*/

:root {

  /* --- PALETA PRINCIPAL --------------------------------------- */

  --horreo-bg-primary:   #0A0A0A;            /* fondo principal */
  --horreo-bg-secondary: #1A1A1A;            /* secciones intercaladas */
  --horreo-bg-tertiary:  #242424;            /* hovers de cards */

  --horreo-gold:         #C9A961;            /* dorado del logo */
  --horreo-gold-light:   #E8D4A0;            /* hover states, brillos */
  --horreo-gold-dim:     #8A7440;            /* dorado apagado */

  --horreo-text-primary:   #F5F5F5;          /* blanco roto */
  --horreo-text-secondary: #A8A8A8;          /* gris cálido para metadatos */
  --horreo-text-muted:     #6E6E6E;          /* nota al pie, copyright */

  --horreo-border:         rgba(201, 169, 97, 0.18);    /* bordes dorados sutiles */
  --horreo-border-strong:  rgba(201, 169, 97, 0.45);

  /* Marca de tercero — Estrella Galicia */
  --horreo-eg-red:       #C8102E;

  /* Estados */
  --horreo-success:      #5A9A3C;
  --horreo-warning:      #E8B440;
  --horreo-danger:       #E06050;            /* "agotado" — coherente con la carta */

  /* --- COLORES POR CATEGORÍA DE CARTA -------------------------- */
  /* Heredados de /carta para coherencia visual */

  --cat-compartir:     #C9A961;
  --cat-huerto:        #5A9A3C;
  --cat-mar:           #2E9FD8;
  --cat-tradicionales: #C07540;
  --cat-frituras:      #D45A33;
  --cat-bocapizza:     #D4863A;
  --cat-molletes:      #A07840;
  --cat-montaditos:    #8AAA3C;

  /* --- TIPOGRAFÍA --------------------------------------------- */

  --horreo-font-display:  'Playfair Display', 'Times New Roman', Georgia, serif;
  --horreo-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --horreo-font-accent:   'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --horreo-font-mono:     ui-monospace, 'SF Mono', Monaco, Consolas, monospace;

  /* Escala fluida con clamp() */
  --fs-xs:      clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm:      clamp(0.875rem, 0.85rem + 0.25vw, 1rem);
  --fs-base:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-lg:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl:      clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-2xl:     clamp(2.5rem, 2rem + 2vw, 4rem);
  --fs-3xl:     clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --fs-display: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Altura de línea */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.9;

  /* Tracking (letter-spacing) — los wordmarks dorados van espaciados */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.18em;

  /* --- ESPACIADO ---------------------------------------------- */
  /* Escala 8px base con offsets editoriales mayores */

  --space-0:    0;
  --space-1:    0.25rem;     /*  4px */
  --space-2:    0.5rem;      /*  8px */
  --space-3:    0.75rem;     /* 12px */
  --space-4:    1rem;        /* 16px */
  --space-5:    1.5rem;      /* 24px */
  --space-6:    2rem;        /* 32px */
  --space-7:    3rem;        /* 48px */
  --space-8:    4rem;        /* 64px */
  --space-9:    6rem;        /* 96px */
  --space-10:   8rem;        /* 128px */

  /* Padding vertical de sección estándar (responsive).
   * iter-19b: reducido de clamp(5,10vw,10) → clamp(3,6vw,6). En pantallas
   * 1920px los 10rem=160px generaban "agujero" entre hero y primer bloque.
   * Ahora 96px máximo: las secciones siguen respirando pero el contenido
   * aparece antes al hacer scroll. .mega-cta mantiene su padding propio
   * (hardcoded, no usa este token) para que los CTAs finales destaquen. */
  --section-py: clamp(3rem, 6vw, 6rem);

  /* --- LAYOUT ------------------------------------------------- */

  /* iter-13: container más edge-to-edge para look premium del preview.
     Antes: max 1400, padding 24-64 px (clamp 1.5-4rem · 5vw)
     iter-13: max 1600, padding 16-24 px (clamp 1-1.5rem · 2vw)
     iter-19: más ancho aún — max 1760 px y padding fijado a 16 px.
     La lectura larga (--container-narrow) sigue a 900 px para que los
     párrafos de storytelling no se estiren a 1700 px y pierdan legibilidad. */
  --container-max:     1760px;
  --container-narrow:  900px;     /* lectura larga (storytelling) */
  --container-px:      clamp(1rem, 1.5vw, 1rem);

  --grid-gap:          clamp(1rem, 2vw, 2rem);

  /* --- RADIOS ------------------------------------------------- */

  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;
  --radius-full:  9999px;

  /* --- SOMBRAS ------------------------------------------------ */

  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:        0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow-gold: 0 8px 32px rgba(201, 169, 97, 0.28);
  --shadow-glow-soft: 0 4px 18px rgba(201, 169, 97, 0.18);

  /* --- Z-INDEX ------------------------------------------------ */

  --z-canvas-bg:    0;       /* burbujas globales */
  --z-content:      10;
  --z-cursor:       20;      /* estela de cursor */
  --z-header:       50;
  --z-floating:     60;      /* botón WhatsApp flotante */
  --z-cookies:      80;
  --z-modal:        100;     /* modal +18 */
  --z-tooltip:      200;

  /* --- TIMING ------------------------------------------------- */

  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  --dur-instant:  100ms;
  --dur-fast:     200ms;
  --dur-base:     400ms;
  --dur-slow:     700ms;
  --dur-glacial:  1200ms;

  /* --- BREAKPOINTS (referencia, no usables en CSS estándar) --- */
  /* mobile: <768  ·  tablet: 768-1023  ·  desktop: 1024-1439  ·  wide: ≥1440 */

}

/* prefers-reduced-motion: anula duraciones globales */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:  1ms;
    --dur-fast:     1ms;
    --dur-base:     1ms;
    --dur-slow:     1ms;
    --dur-glacial:  1ms;
  }
}