/* Design Tokens — extraídos del flyer Tomás Giménez */
:root {
    /* Colores */
    --bg:           #080808;
    --bg-2:         #111111;
    --bg-card:      #161616;
    --gold:         #d4a017;
    --amber:        #c8922a;
    --gold-light:   #f0c040;
    --cta:          #e8a020;
    --cta-hover:    #f5b030;
    --white:        #ffffff;
    --white-70:     rgba(255,255,255,0.70);
    --white-40:     rgba(255,255,255,0.40);
    --white-15:     rgba(255,255,255,0.15);
    --border:       rgba(212,160,23,0.25);
    --overlay:      rgba(8,8,8,0.55);
    --overlay-hero: linear-gradient(
        to bottom,
        rgba(8,8,8,0.35) 0%,
        rgba(8,8,8,0.50) 40%,
        rgba(8,8,8,0.85) 80%,
        rgba(8,8,8,1)    100%
    );

    /* Tipografía */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', sans-serif;

    /* Tamaños display (fluid) */
    --size-hero-name:    clamp(3.5rem, 14vw, 9rem);
    --size-hero-album:   clamp(2rem, 7vw, 5rem);
    --size-section-title:clamp(1.8rem, 5vw, 3rem);
    --size-xl:           clamp(1.2rem, 3vw, 1.6rem);
    --size-lg:           1.125rem;
    --size-md:           1rem;
    --size-sm:           0.875rem;
    --size-xs:           0.75rem;

    /* Espaciado */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;
    --space-2xl: 8rem;

    /* Radio */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-full:9999px;

    /* Sombras */
    --shadow-cta:  0 0 40px rgba(232,160,32,0.45), 0 4px 20px rgba(0,0,0,0.6);
    --shadow-card: 0 2px 20px rgba(0,0,0,0.4);
    --glow-gold:   0 0 60px rgba(212,160,23,0.3);

    /* Transiciones */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --duration:    0.25s;

    /* Z-index */
    --z-sticky:  100;
    --z-urgency: 200;
    --z-overlay: 10;
}