/* ============================================================
   VARIABLES CSS — css/variables.css
   ============================================================
   Paleta: Negro / Dorado Premium
   Tipografía: Playfair Display (display) + DM Sans (body)
   
   Para cambiar la apariencia global del sitio,
   modifique únicamente las variables de este archivo.
   ============================================================ */

:root {
    /* ----- COLORES ----- */
    --color-gold:          #C00000;
    --color-gold-light:    #E34A4A;
    --color-gold-dark:     #990000;
    --color-gold-muted:    rgba(192, 0, 0, 0.15);

    --color-black:         #FEF7F7;
    --color-black-soft:    #FFFFFF;
    --color-black-card:    #FFFFFF;
    --color-black-border:  #F0E0E0;

    --color-white:         #2D1A1A;
    --color-white-pure:    #000000;
    --color-gray-100:      #4A3737;
    --color-gray-300:      #6B5C5C;
    --color-gray-500:      #A39494;
    --color-gray-700:      #D6CACA;

    /* ----- TIPOGRAFÍA ----- */
    --font-display:        'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:           'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-xs:               0.75rem;    /* 12px */
    --fs-sm:               0.875rem;   /* 14px */
    --fs-base:             1rem;       /* 16px */
    --fs-md:               1.125rem;   /* 18px */
    --fs-lg:               1.25rem;    /* 20px */
    --fs-xl:               1.5rem;     /* 24px */
    --fs-2xl:              2rem;       /* 32px */
    --fs-3xl:              2.5rem;     /* 40px */
    --fs-4xl:              3.25rem;    /* 52px */
    --fs-5xl:              4rem;       /* 64px */

    --fw-light:            300;
    --fw-regular:          400;
    --fw-medium:           500;
    --fw-semibold:         600;
    --fw-bold:             700;

    --lh-tight:            1.15;
    --lh-snug:             1.3;
    --lh-normal:           1.6;
    --lh-relaxed:          1.8;

    --ls-tight:            -0.02em;
    --ls-normal:           0;
    --ls-wide:             0.05em;
    --ls-wider:            0.12em;

    /* ----- ESPACIADO ----- */
    --space-xs:            0.5rem;
    --space-sm:            1rem;
    --space-md:            1.5rem;
    --space-lg:            2.5rem;
    --space-xl:            4rem;
    --space-2xl:           6rem;
    --space-3xl:           8rem;
    --space-section:       7rem;

    /* ----- BORDES Y RADIOS ----- */
    --radius-sm:           6px;
    --radius-md:           12px;
    --radius-lg:           20px;
    --radius-full:         999px;

    --border-subtle:       1px solid var(--color-black-border);
    --border-gold:         1px solid var(--color-gold);

    /* ----- SOMBRAS ----- */
    --shadow-sm:           0 2px 8px rgba(0,0,0,0.05);
    --shadow-md:           0 8px 30px rgba(0,0,0,0.08);
    --shadow-lg:           0 20px 60px rgba(0,0,0,0.12);
    --shadow-gold:         0 4px 20px rgba(192, 0, 0, 0.2);

    /* ----- TRANSICIONES ----- */
    --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth:         cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:       200ms;
    --duration-normal:     400ms;
    --duration-slow:       700ms;

    /* ----- LAYOUT ----- */
    --container-max:       1200px;
    --navbar-height:       80px;
}