/* ============================================================
   TOKENS — Tequilera de la Barranca de Amatitán
   Sistema de diseño: variables globales. No poner reglas aquí.
   ============================================================ */

:root {

  /* ── Paleta principal ──────────────────────────────────────── */
  --color-agave-sage:    #7a8a6b;
  --color-stone-mist:    #c8c2b6;
  --color-warm-ivory:    #f4ede0;
  --color-smoke-charcoal:#2b2826;
  --color-river-slate:   #4a5450;
  --color-gold-accent:   #b8995a;
  --color-copper:        #9b6b47;

  /* Texto secundario sobre fondo oscuro (charcoal). 4.8:1 → pasa WCAG AA.
     Reemplaza a river-slate cuando el contenedor sea charcoal o smoke-*. */
  --color-text-muted-dark: #a8a39a;

  /* ── Derivados con transparencia ──────────────────────────── */
  --color-smoke-95:  rgba(43, 40, 38, 0.95);
  --color-smoke-85:  rgba(43, 40, 38, 0.85);
  --color-smoke-70:  rgba(43, 40, 38, 0.70);
  --color-smoke-40:  rgba(43, 40, 38, 0.40);
  --color-smoke-15:  rgba(43, 40, 38, 0.15);
  --color-ivory-90:  rgba(244, 237, 224, 0.90);
  --color-ivory-60:  rgba(244, 237, 224, 0.60);
  --color-gold-20:   rgba(184, 153, 90, 0.20);

  /* ── Tipografía ─────────────────────────────────────────────
     Sistema editorial premium 2026 (NO Cormorant / NO Inter, ambos
     etiquetados como "freemium default" por la industria en 2026):
     • Fraunces: serif variable con alto carácter editorial —
       weights 200-300 para display, 400 para pull-quotes.
     • Space Grotesk: sans geométrico premium con personalidad neutral
       para UI, labels y body. Matchea el sistema de Salamandra
       (consistencia entre marcas del grupo).
     ────────────────────────────────────────────────────────────── */
  --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala fluid (clamp: mínimo en 375px, máximo en 1440px) */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.19vw, 0.8125rem);   /* 11→13px */
  --text-sm:   clamp(0.8125rem, 0.77rem + 0.22vw, 0.9375rem);   /* 13→15px */
  --text-base: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);    /* 15→17px */
  --text-lg:   clamp(1.0625rem, 0.97rem + 0.48vw, 1.25rem);     /* 17→20px */
  --text-xl:   clamp(1.25rem,   1.1rem  + 0.75vw, 1.5rem);      /* 20→24px */
  --text-2xl:  clamp(1.5rem,    1.3rem  + 1vw,    2rem);         /* 24→32px */
  --text-3xl:  clamp(2rem,      1.6rem  + 2vw,    3rem);         /* 32→48px */
  --text-4xl:  clamp(2.5rem,    1.9rem  + 3vw,    4.5rem);       /* 40→72px */
  --text-5xl:  clamp(3rem,      2.2rem  + 4vw,    6rem);         /* 48→96px */

  /* Interlineado */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-base:    1.6;
  --leading-relaxed: 1.75;

  /* Espaciado entre letras */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.22em;

  /* ── Espaciado ────────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Espaciado fluid para secciones */
  --section-padding-y: clamp(5rem, 9vw, 11rem);
  --section-padding-x: clamp(1.5rem, 5.5vw, 5.5rem);
  --content-max-width: 1200px;
  --prose-max-width:   680px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);

  --transition-fast:   200ms var(--ease-out);
  --transition-base:   350ms var(--ease-out);
  --transition-slow:   600ms var(--ease-out);
  --transition-crawl: 1000ms var(--ease-out);

  /* Reveal: desplazamiento vertical al entrar */
  --reveal-distance: 2rem;

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  50;
  --z-overlay: 100;
  --z-modal:   200;

  /* ── Bordes ───────────────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-lg:   8px;

  /* ── Breakpoints (solo referencia — usar en @media) ────────── */
  /* xs: 375px | sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1920px */
}

/* Desactivar motion si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-base:   0ms;
    --transition-slow:   0ms;
    --transition-crawl:  0ms;
    --reveal-distance:   0px;
  }
}