/* Design tokens — Salamandra
   Custom properties globales. Se cargan ANTES de styles.css para permitir override.
   Cambios de brand en un solo lugar: colores, tipografía, spacing, ease, z-index. */
:root {
  /* ── Color · base fría contemporánea ── */
  --ink:      #07090D;
  --ink-2:    #0E1219;
  --ink-3:    #161C26;
  --frost:    #EAF0F6;
  --frost-dim:#9AA7B5;
  --line:     rgba(234, 240, 246, 0.10);
  --line-2:   rgba(234, 240, 246, 0.22);
  --accent:   #c9a96e;

  /* ── Color · por producto ── */
  --gin:      #1F7A5A;
  --vodka:    #3E6FF2;
  --rum:      #C7603A;
  --orange:   #E0A12B;
  --curacao:  #0E8BE0;
  --tamarind: #9E2B3A;

  /* ── Tipografía ── */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;

  /* ── Spacing scale ── */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Radios ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── Easing ── */
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Apple spring aproximado con CSS4 linear() — 24 keyframes de damping natural
     (Chrome 113+, Safari 17.4+, Firefox 112+). Fallback: --ease-spring cubic-bezier. */
  --ease-apple-spring: linear(
    0, 0.006, 0.025 2.07%, 0.101 4.5%, 0.539 12.9%, 0.678, 0.789, 0.87, 0.925, 0.958,
    0.977 22.9%, 0.986, 0.991, 0.995, 0.999, 1.001 32.4%, 1.002 34.8%, 1.002 39.6%,
    1.001, 1 45.5%, 0.999 51.4%, 1
  );
  --ease-apple-out: linear(
    0, 0.09, 0.35, 0.67, 0.86, 0.96, 1
  );

  /* Liquid Glass · sombras y highlights para efecto Apple iOS 26 */
  --lg-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lg-glow:      inset 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* ── Sombras ── */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);

  /* ── Z-index scale ── */
  --z-under:      -1;
  --z-base:       1;
  --z-nav:        100;
  --z-mobile:     105;
  --z-nav-open:   200;
  --z-fab:        900;
  --z-cookie:     9000;
  --z-age-gate:   10000;
  --z-modal:      10500;
  --z-skip:       10600;
}