/* ═══════════════════════════════════════════════════════════
   SISIRO — CSS Design System & Variables
   Premium Luxury Bridal Makeup Brand
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Primary Colors ─────────────────────────────────── */
    --color-black:           #0B0B0B;
    --color-black-light:     #141414;
    --color-black-soft:      #1A1A1A;
    --color-black-card:      #111111;
    --color-gold:            #D4AF37;
    --color-gold-light:      #E8CC6E;
    --color-gold-dark:       #B8942E;
    --color-gold-muted:      rgba(212, 175, 55, 0.15);
    --color-gold-glow:       rgba(212, 175, 55, 0.3);

    /* ─── Secondary Colors ───────────────────────────────── */
    --color-champagne:       #F7E7CE;
    --color-champagne-light: #FFF5E6;
    --color-ivory:           #FFFFF0;
    --color-white:           #FFFFFF;
    --color-off-white:       #F9F6F1;
    --color-cream:           #FDF8F0;

    /* ─── Text Colors ────────────────────────────────────── */
    --text-primary:          #FFFFFF;
    --text-secondary:        rgba(255, 255, 255, 0.7);
    --text-muted:            rgba(255, 255, 255, 0.5);
    --text-gold:             #D4AF37;
    --text-dark:             #0B0B0B;
    --text-dark-secondary:   #444444;

    /* ─── Gradients ──────────────────────────────────────── */
    --gradient-gold:         linear-gradient(135deg, #D4AF37 0%, #F2D675 50%, #D4AF37 100%);
    --gradient-gold-subtle:  linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0.05) 100%);
    --gradient-dark:         linear-gradient(180deg, #0B0B0B 0%, #141414 100%);
    --gradient-dark-overlay: linear-gradient(180deg, rgba(11,11,11,0.8) 0%, rgba(11,11,11,0.95) 100%);
    --gradient-hero:         linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.3) 40%, rgba(11,11,11,0.85) 100%);
    --gradient-card:         linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.9) 100%);
    --gradient-gold-shine:   linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.4) 50%, transparent 100%);
    --gradient-section:      linear-gradient(180deg, #0B0B0B 0%, #0F0F0F 50%, #0B0B0B 100%);

    /* ─── Typography ─────────────────────────────────────── */
    --font-display:          'Playfair Display', Georgia, serif;
    --font-heading:          'Cormorant Garamond', Georgia, serif;
    --font-body:             'Poppins', 'Segoe UI', sans-serif;
    --font-ui:               'DM Sans', 'Segoe UI', sans-serif;

    /* ─── Font Sizes ─────────────────────────────────────── */
    --text-xs:               0.75rem;
    --text-sm:               0.875rem;
    --text-base:             1rem;
    --text-md:               1.125rem;
    --text-lg:               1.25rem;
    --text-xl:               1.5rem;
    --text-2xl:              2rem;
    --text-3xl:              2.5rem;
    --text-4xl:              3rem;
    --text-5xl:              3.75rem;
    --text-6xl:              4.5rem;
    --text-7xl:              6rem;
    --text-hero:             clamp(2.5rem, 6vw, 5.5rem);
    --text-section:          clamp(2rem, 4vw, 3.5rem);
    --text-subtitle:         clamp(1rem, 2vw, 1.25rem);

    /* ─── Font Weights ───────────────────────────────────── */
    --weight-light:          300;
    --weight-regular:        400;
    --weight-medium:         500;
    --weight-semibold:       600;
    --weight-bold:           700;

    /* ─── Letter Spacing ─────────────────────────────────── */
    --tracking-tight:        -0.02em;
    --tracking-normal:       0;
    --tracking-wide:         0.05em;
    --tracking-wider:        0.1em;
    --tracking-widest:       0.2em;
    --tracking-luxury:       0.3em;

    /* ─── Line Heights ───────────────────────────────────── */
    --leading-none:          1;
    --leading-tight:         1.15;
    --leading-snug:          1.3;
    --leading-normal:        1.6;
    --leading-relaxed:       1.8;
    --leading-loose:         2;

    /* ─── Spacing ────────────────────────────────────────── */
    --space-xs:              0.5rem;
    --space-sm:              1rem;
    --space-md:              1.5rem;
    --space-lg:              2rem;
    --space-xl:              3rem;
    --space-2xl:             4rem;
    --space-3xl:             6rem;
    --space-4xl:             8rem;
    --space-5xl:             10rem;
    --section-padding:       clamp(4rem, 8vw, 8rem);

    /* ─── Borders ────────────────────────────────────────── */
    --border-thin:           1px solid rgba(212, 175, 55, 0.15);
    --border-gold:           1px solid rgba(212, 175, 55, 0.3);
    --border-gold-strong:    1px solid #D4AF37;
    --border-subtle:         1px solid rgba(255, 255, 255, 0.08);
    --border-white-subtle:   1px solid rgba(255, 255, 255, 0.1);
    --radius-sm:             4px;
    --radius-md:             8px;
    --radius-lg:             12px;
    --radius-xl:             20px;
    --radius-full:           50%;
    --radius-pill:           999px;

    /* ─── Shadows ────────────────────────────────────────── */
    --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:             0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl:             0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-gold:           0 4px 24px rgba(212, 175, 55, 0.2);
    --shadow-gold-lg:        0 8px 40px rgba(212, 175, 55, 0.3);
    --shadow-gold-glow:      0 0 30px rgba(212, 175, 55, 0.15);
    --shadow-inner:          inset 0 2px 8px rgba(0, 0, 0, 0.3);

    /* ─── Transitions ────────────────────────────────────── */
    --ease-smooth:           cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out:              cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:           cubic-bezier(0.65, 0, 0.35, 1);
    --ease-elastic:          cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce:           cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --duration-fast:         0.2s;
    --duration-normal:       0.4s;
    --duration-slow:         0.6s;
    --duration-slower:       0.8s;
    --duration-slowest:      1.2s;

    /* ─── Z-Index Scale ──────────────────────────────────── */
    --z-behind:              -1;
    --z-base:                1;
    --z-dropdown:            100;
    --z-sticky:              200;
    --z-navbar:              500;
    --z-overlay:             600;
    --z-modal:               700;
    --z-popup:               800;
    --z-preloader:           900;
    --z-toast:               950;
    --z-max:                 9999;

    /* ─── Layout ─────────────────────────────────────────── */
    --container-max:         1320px;
    --container-narrow:      960px;
    --container-wide:        1440px;
    --navbar-height:         80px;
    --navbar-height-scrolled: 64px;
}