/* ==========================================================================
   SALSAS CHILANGAS · DESIGN TOKENS
   --------------------------------------------------------------------------
   Fuente única de verdad del sistema visual. Extraído del UI Kit.
   Todas las variables viven en :root para que Elementor (Custom CSS,
   contenedores y widgets) y WooCommerce puedan consumirlas con var(--token).

   En Elementor: Site Settings → Global Colors / Global Fonts deben apuntar
   a estos mismos HEX (ver tabla de mapeo en README.md).
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     1. BRAND COLORS (escalas para hover / focus / texto)
     ---------------------------------------------------------------------- */

  /* Verde nopal (marca) */
  --green-100:#E4F3E7;
  --green-200:#BFE4C6;
  --green-300:#6FBE7E;
  --green-400:#3FA64F;
  --green-500:#228933;        /* verde marca */
  --green-600:#1C7330;
  --green-700:rgba(20,85,35,.5);
  --green-700-solid:#145523;

  /* Rojo chile (marca) */
  --red-100:#FBE4E9;
  --red-200:#F5BDC8;
  --red-300:#E87189;
  --red-400:#DC3A57;
  --red-500:#C51535;          /* rojo chile marca */
  --red-600:#A30F2A;
  --red-700:#7A0C20;

  /* Ámbar / oro (premios & chile seco) */
  --amber-100:#FBEEDA;
  --amber-300:#EBB463;
  --amber-500:#D98A2B;
  --amber-600:#B66E18;
  --amber-700:#8A510F;
  --gold:#C9962E;
  --gold-soft:#E6C778;

  /* ----------------------------------------------------------------------
     2. NEUTRALS (cálidos = sensación artesanal / gourmet)
     ---------------------------------------------------------------------- */
  --ink-900:#141414;
  --ink-800:#191919;          /* carbón marca */
  --ink-700:#2A2A28;
  --ink-600:#3C3A36;
  --ink-500:#55504A;
  --ink-400:#7C766C;
  --ink-300:#A8A399;
  --ink-200:#D8D4CB;
  --ink-100:#ECE9E2;

  --cream-50:#FBF8F3;         /* fondo cálido principal */
  --cream-100:#F5F1E9;        /* fondo cálido alterno */
  --gray-50:#F5F5F5;
  --white:#FFFFFF;

  /* ----------------------------------------------------------------------
     3. STATUS COLORS
     ---------------------------------------------------------------------- */
  --success:#228933;   --success-bg:#E4F3E7;
  --warning:#D98A2B;   --warning-bg:#FBEEDA;
  --error:#C51535;     --error-bg:#FBE4E9;
  --info:#2C6E8F;      --info-bg:#E1EEF3;

  /* ----------------------------------------------------------------------
     4. NIVELES DE PICANTE (1 → 7)
        1-2 suave · 3 medio · 4-5 intenso · 6-7 solo para valientes
     ---------------------------------------------------------------------- */
  --spice-1:#4FB05E;   /* suave     */
  --spice-2:#8FC23E;   /* suave     */
  --spice-3:#E0B400;   /* medio     */
  --spice-4:#F08A24;   /* intenso   */
  --spice-5:#E2562A;   /* intenso   */
  --spice-6:#C51535;   /* valientes */
  --spice-7:#7A0C20;   /* valientes */
  --spice-track:#ECE9E2;

  /* ----------------------------------------------------------------------
     5. SEMÁNTICOS — FONDOS
     ---------------------------------------------------------------------- */
  --bg-page:var(--cream-50);
  --bg-surface:var(--white);
  --bg-surface-alt:var(--cream-100);
  --bg-muted:var(--gray-50);
  --bg-inverse:var(--ink-800);
  --bg-brand-green:var(--green-500);
  --bg-brand-red:var(--red-500);

  /* ----------------------------------------------------------------------
     6. SEMÁNTICOS — TEXTO
     ---------------------------------------------------------------------- */
  --text-primary:var(--ink-800);
  --text-secondary:var(--ink-500);
  --text-muted:var(--ink-400);
  --text-inverse:var(--cream-50);
  --text-inverse-muted:#C9C4BB;
  --text-brand:var(--green-600);
  --text-price:var(--ink-900);

  /* ----------------------------------------------------------------------
     7. SEMÁNTICOS — BORDES
     ---------------------------------------------------------------------- */
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-inverse:rgba(255,255,255,.14);
  --border-width:1px;

  /* ----------------------------------------------------------------------
     8. TIPOGRAFÍA
        display = Bricolage Grotesque · body = Hanken Grotesk
     ---------------------------------------------------------------------- */
  --font-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extra:800;

  /* Type scale base (desktop). Las clases usan clamp() para fluidez. */
  --fs-display:4.25rem;  --lh-display:1.02; --ls-display:-0.03em;
  --fs-h1:3rem;          --lh-h1:1.05;      --ls-h1:-0.025em;
  --fs-h2:2.25rem;       --lh-h2:1.1;       --ls-h2:-0.02em;
  --fs-h3:1.625rem;      --lh-h3:1.18;      --ls-h3:-0.015em;
  --fs-h4:1.25rem;       --lh-h4:1.3;       --ls-h4:-0.01em;
  --fs-lead:1.25rem;     --lh-lead:1.55;
  --fs-body:1.0625rem;   --lh-body:1.65;
  --fs-small:0.875rem;   --lh-small:1.5;
  --fs-label:0.8125rem;  --lh-label:1.3;
  --fs-kicker:0.75rem;   --ls-kicker:0.16em;
  --fs-price:1.5rem;
  --fs-nav:0.9375rem;
  --fs-cta:0.9375rem;

  /* ----------------------------------------------------------------------
     9. SPACING TOKENS (escala 4px)
     ---------------------------------------------------------------------- */
  --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;
  --space-32:128px;

  /* ----------------------------------------------------------------------
     10. SECTION PADDING / GAP (responsive: ver design-tokens media queries)
     ---------------------------------------------------------------------- */
  --section-py:96px;
  --section-py-sm:64px;
  --grid-gap:24px;
  --grid-gap-lg:40px;

  /* ----------------------------------------------------------------------
     11. CONTAINER / LAYOUT
     ---------------------------------------------------------------------- */
  --container-max:1240px;
  --container-narrow:820px;
  --container-pad:24px;

  /* ----------------------------------------------------------------------
     12. RADIUS TOKENS
     ---------------------------------------------------------------------- */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* ----------------------------------------------------------------------
     13. SHADOW / ELEVATION
     ---------------------------------------------------------------------- */
  --shadow-xs:0 1px 2px rgba(20,20,20,.06);
  --shadow-sm:0 2px 8px rgba(20,20,20,.06);
  --shadow-md:0 10px 24px -8px rgba(20,20,20,.12);
  --shadow-lg:0 22px 48px -16px rgba(20,20,20,.20);
  --shadow-brand:0 18px 40px -16px rgba(197,21,53,.45);
  --shadow-focus:0 0 0 3px rgba(34,137,51,.30);

  /* ----------------------------------------------------------------------
     14. Z-INDEX
     ---------------------------------------------------------------------- */
  --z-base:1;
  --z-dropdown:100;
  --z-sticky:200;
  --z-header:300;
  --z-overlay:400;
  --z-modal:500;

  /* ----------------------------------------------------------------------
     15. TRANSICIONES
     ---------------------------------------------------------------------- */
  --t-fast:140ms cubic-bezier(.4,0,.2,1);
  --t-base:220ms cubic-bezier(.4,0,.2,1);
  --t-slow:380ms cubic-bezier(.16,1,.3,1);

  /* ----------------------------------------------------------------------
     16. FOCUS
     ---------------------------------------------------------------------- */
  --focus-ring:2px solid var(--green-500);
  --focus-offset:3px;

  /* ----------------------------------------------------------------------
     17. ICONOGRAFÍA (outline)
     ---------------------------------------------------------------------- */
  --icon-stroke:1.75;
  --icon-sm:18px;
  --icon-md:22px;
  --icon-lg:28px;
}

/* ==========================================================================
   TOKENS RESPONSIVE
   Solo se ajustan tokens que cambian de valor por breakpoint.
   El type scale ya es fluido vía clamp() en typography.css.
   Breakpoints: 1024 (laptop) · 768 (tablet) · 560 (mobile)
   ========================================================================== */
@media (max-width:1024px){
  :root{
    --section-py:72px;
    --grid-gap-lg:28px;
  }
}
@media (max-width:768px){
  :root{
    --section-py:56px;
    --container-pad:18px;
  }
}
@media (max-width:560px){
  :root{
    --section-py:48px;
  }
}