/* ========================================
   PRODUCTES TRADICIONALS OLCINA LÓPEZ
   tokens.css — Design tokens (paleta original intacta)
   ======================================== */
:root {
    /* Paleta de colores principal */
    --bg-color: #FBF8F1;
    --bg-dark: #2C3E30;
    --bg-gradient: linear-gradient(135deg, #FBF8F1 0%, #F0EAD6 50%, #E8E2D0 100%);
    --text-color: #2D2D2D;
    --text-muted: #6B6B6B;
    --primary-color: #3A5F42;
    --primary-light: #4A7A54;
    --primary-dark: #2A4A32;
    --secondary-color: #D4A017;
    --secondary-light: #E8B84A;
    --accent-color: #F0EAD6;

    /* Gradientes premium */
    --gradient-hero: linear-gradient(135deg, #3A5F42 0%, #2A4A32 50%, #1E3A26 100%);
    --gradient-gold: linear-gradient(135deg, #D4A017 0%, #E8B84A 100%);
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(251,248,241,0.9));
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));

    /* Tipografías */
    --heading-font: 'Playfair Display', serif;
    --body-font: 'Lato', sans-serif;

    /* Transiciones premium */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Sombras modernas */
    --shadow-sm: 0 2px 8px rgba(58, 95, 66, 0.08);
    --shadow-md: 0 8px 24px rgba(58, 95, 66, 0.12);
    --shadow-lg: 0 16px 48px rgba(58, 95, 66, 0.16);
    --shadow-xl: 0 24px 64px rgba(58, 95, 66, 0.2);
    --shadow-glow: 0 0 40px rgba(212, 160, 23, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: blur(20px);

    /* Espaciados */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;
    --spacing-3xl: 8rem;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 9999px;

    /* Z-index */
    --z-header: 1000;
    --z-mobile-menu: 1100;
    --z-overlay: 1200;

    /* ========================================
       TEMA LA BIRRETA - BEERTRUCK
       ======================================== */
    --birreta-bg: #1A1512;
    --birreta-bg-light: #2D2620;
    --birreta-primary: #C87941;
    --birreta-secondary: #D4A017;
    --birreta-accent: #E8B04B;
    --birreta-text: #F5E6D3;
    --birreta-text-muted: #B8A089;

    /* Gradientes cerveceros */
    --birreta-gradient-dark: linear-gradient(135deg, #1A1512 0%, #2D2620 50%, #3D3530 100%);
    --birreta-gradient-amber: linear-gradient(135deg, #C87941 0%, #E8B04B 100%);
    --birreta-gradient-wood: linear-gradient(180deg, #2D2620 0%, #1A1512 100%);

    /* Sombras tematicas La Birreta */
    --birreta-shadow-sm: 0 2px 8px rgba(200, 121, 65, 0.15);
    --birreta-shadow-md: 0 4px 15px rgba(200, 121, 65, 0.2);
    --birreta-shadow-lg: 0 8px 25px rgba(200, 121, 65, 0.25);
    --birreta-shadow-glow: 0 0 30px rgba(232, 176, 75, 0.4);

    /* Curvas de animacion avanzadas */
    --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --animation-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --animation-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* ========================================
       TOKENS v4 — Rediseño 2026
       ======================================== */
    /* Escala tipográfica fluida */
    --text-hero: clamp(2.6rem, 6.5vw + 1rem, 5.75rem);
    --text-display: clamp(2rem, 3.5vw + 0.75rem, 3.75rem);
    --text-title: clamp(1.5rem, 2vw + 0.5rem, 2.4rem);
    --text-lead: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem);

    /* Ritmo vertical y layout */
    --space-section: clamp(4rem, 10vh, 7.5rem);
    --container: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --nav-h: 72px;

    /* Tarjetas y rails */
    --card-w: clamp(240px, 64vw, 320px);
    --card-w-lg: clamp(270px, 74vw, 360px);
    --photo-bg: #F5F0E4;
}