:root {
    /* ─── Core Palette ─── */
    --clr-red:          #6B1421;   /* Deep cinematic red background */
    --clr-red-dark:     #4D0D17;   /* Darker for depth */
    --clr-ivory:        #F8F6F1;   /* Card background */
    --clr-white:        #FFFFFF;
    --clr-black:        #1A1A1A;   /* Matte black */
    --clr-gold:         #C9A84C;   /* Metallic gold accent */
    --clr-gray-warm:    #E8E4DC;

    /* ─── Typography ─── */
    --font-serif:       'Playfair Display', serif;
    --font-sans:        'Inter', sans-serif;

    /* ─── Border System ─── */
    --border-main:      2.5px solid var(--clr-black);
    --border-thick:     3px solid var(--clr-black);
    --border-gold:      1.5px solid var(--clr-gold);

    /* ─── Border Radius ─── */
    --radius-sm:        10px;
    --radius-md:        20px;
    --radius-lg:        30px;
    --radius-xl:        48px;
    --radius-pill:      9999px;

    /* ─── Shadows ─── */
    --shadow-card:      4px 4px 0px var(--clr-black), 0 10px 30px rgba(0,0,0,0.08);
    --shadow-card-hover:8px 8px 0px var(--clr-black), 0 20px 40px rgba(0,0,0,0.15);
    --shadow-float:     0 24px 60px rgba(0, 0, 0, 0.25);
    --shadow-cinematic: inset 0 0 100px rgba(0,0,0,0.5);

    /* ─── Spacing ─── */
    --sp-xs:  0.5rem;
    --sp-sm:  1rem;
    --sp-md:  2rem;
    --sp-lg:  4rem;
    --sp-xl:  8rem;

    /* ─── Transitions ─── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-luxury: cubic-bezier(0.85, 0, 0.15, 1);
    --tr-fast:     0.4s var(--ease-out);
    --tr-smooth:   0.8s var(--ease-luxury);
    --tr-slow:     1.4s var(--ease-luxury);
}