/* ============================================
   Jupiter Planet XXL - Design 4
   Light Elegant Serif — CSS Custom Properties
   ============================================ */

:root {
    /* ── Brand Colors ── */
    --color-bg:             #faf8f5;
    --color-bg-alt:         #f5f0eb;
    --color-card:           #ffffff;
    --color-primary:        #b8860b;
    --color-primary-light:  #d4a843;
    --color-primary-dark:   #8b6508;
    --color-secondary:      #722f37;
    --color-secondary-light:#8e3a44;
    --color-accent:         #c9a96e;
    --color-gold-gradient:  linear-gradient(135deg, #d4a843 0%, #b8860b 50%, #8b6508 100%);

    /* ── Text ── */
    --color-heading:        #1a1a1a;
    --color-body:           #2d2d2d;
    --color-muted:          #6b6b6b;
    --color-light:          #999999;
    --color-white:          #ffffff;
    --color-black:          #000000;

    /* ── Borders & Dividers ── */
    --color-border:         #e0dbd4;
    --color-border-light:   #ece8e2;
    --color-border-dark:    #c5bfb5;
    --color-divider:        #d4cfc7;

    /* ── Overlays ── */
    --overlay-dark:         rgba(26, 26, 26, 0.55);
    --overlay-light:        rgba(250, 248, 245, 0.9);
    --shadow-sm:            0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:            0 4px 16px rgba(0,0,0,0.07);
    --shadow-lg:            0 8px 32px rgba(0,0,0,0.09);
    --shadow-card:          0 2px 12px rgba(0,0,0,0.05);
    --shadow-hover:         0 6px 24px rgba(0,0,0,0.10);

    /* ── Typography ── */
    --font-heading:         'Cormorant Garamond', 'Georgia', serif;
    --font-body:            'Nunito Sans', 'Helvetica Neue', sans-serif;
    --font-accent:          'Cormorant Garamond', serif;

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

    --fs-xs:                0.75rem;
    --fs-sm:                0.875rem;
    --fs-base:              1rem;
    --fs-md:                1.125rem;
    --fs-lg:                1.25rem;
    --fs-xl:                1.5rem;
    --fs-2xl:               2rem;
    --fs-3xl:               2.5rem;
    --fs-4xl:               3.25rem;
    --fs-5xl:               4rem;
    --fs-hero:              5.5rem;

    --ls-tight:             -0.01em;
    --ls-normal:            0.02em;
    --ls-wide:              0.08em;
    --ls-wider:             0.15em;
    --ls-widest:            0.25em;
    --ls-ultra:             0.35em;

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

    /* ── Spacing ── */
    --space-xs:             0.5rem;
    --space-sm:             0.75rem;
    --space-md:             1rem;
    --space-lg:             1.5rem;
    --space-xl:             2rem;
    --space-2xl:            3rem;
    --space-3xl:            4rem;
    --space-4xl:            6rem;
    --space-5xl:            8rem;
    --section-padding:      6rem 0;

    /* ── Layout ── */
    --container-max:        1200px;
    --container-narrow:     860px;
    --container-wide:       1400px;
    --header-height:        140px;
    --header-height-shrunk: 90px;

    /* ── Radius ── */
    --radius-sm:            2px;
    --radius-md:            4px;
    --radius-lg:            8px;
    --radius-pill:          50px;
    --radius-circle:        50%;

    /* ── Transitions ── */
    --transition-fast:      0.2s ease;
    --transition-base:      0.35s ease;
    --transition-slow:      0.5s ease;
    --transition-elegant:   0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ── Z-Index ── */
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-navbar:             500;
    --z-overlay:            900;
    --z-modal:              1000;
}