/**
 * ============================================
 * CSS CUSTOM PROPERTIES (VARIABLES)
 * Sophie & Jacob Schuller Wedding
 * ============================================
 * 
 * Color palette based on the provided wedding palette:
 * Amethyst, Peridot, Pink Tourmaline, Smokey Quartz
 */

:root {
    /* ----------------------------------------
     * COLOR PALETTE - Primary Gemstone Colors
     * ---------------------------------------- */
    
    /* Amethyst Family - Deep purples for drama and luxury */
    --color-deep-aubergine: #3F1F4A;
    --color-deep-eggplant: #241224;
    --color-orchid-purple: #A67BBE;
    --color-lavender-mist: #D6CBE8;
    
    /* Peridot Family - Botanical greens for life and growth */
    --color-deep-juniper: #3F5634;
    --color-modern-moss: #7F9B5C;
    --color-bright-botanical: #8FBF6A;
    
    /* Pink Tourmaline Family - Romantic pinks for warmth */
    --color-cabernet: #4B0F1C;
    --color-bordeaux: #5A1A2C;
    --color-maroon: #6B1F2B;
    --color-rosewater-glow: #F9DCE7;
    --color-petal-pop-pink: #FBE3EC;
    
    /* ----------------------------------------
     * SEMANTIC COLOR ASSIGNMENTS
     * ---------------------------------------- */
    
    /* Background colors */
    --bg-primary: #0D0A0E;                    /* Near-black with purple undertone */
    --bg-secondary: var(--color-deep-eggplant);
    --bg-elevated: rgba(63, 31, 74, 0.3);     /* Translucent aubergine */
    --bg-accent: var(--color-cabernet);
    
    /* Text colors */
    --text-primary: #F8F6F9;                  /* Warm off-white */
    --text-secondary: rgba(248, 246, 249, 0.7);
    --text-muted: rgba(248, 246, 249, 0.5);
    --text-accent: var(--color-rosewater-glow);
    --text-on-light: var(--color-deep-eggplant);
    
    /* Interactive colors */
    --color-link: var(--color-lavender-mist);
    --color-link-hover: var(--color-rosewater-glow);
    --color-focus: var(--color-orchid-purple);
    
    /* Border colors */
    --border-subtle: rgba(248, 246, 249, 0.1);
    --border-medium: rgba(248, 246, 249, 0.2);
    --border-accent: var(--color-orchid-purple);
    
    /* ----------------------------------------
     * TYPOGRAPHY
     * ---------------------------------------- */
    
    /* Font families */
    --font-display: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* Font sizes - Mobile first (rem based, 1rem = 16px) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 2rem;        /* 32px */
    --text-4xl: 2.5rem;      /* 40px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 4rem;        /* 64px */
    --text-hero: 5rem;       /* 80px */
    
    /* Font weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    
    /* Line heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.2em;
    
    /* ----------------------------------------
     * SPACING
     * ---------------------------------------- */
    
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.5rem;       /* 24px */
    --space-6: 2rem;         /* 32px */
    --space-8: 3rem;         /* 48px */
    --space-10: 4rem;        /* 64px */
    --space-12: 5rem;        /* 80px */
    --space-16: 6rem;        /* 96px */
    --space-20: 8rem;        /* 128px */
    --space-24: 10rem;       /* 160px */
    
    /* Section spacing */
    --section-padding-mobile: var(--space-12);
    --section-padding-desktop: var(--space-20);
    
    /* ----------------------------------------
     * LAYOUT
     * ---------------------------------------- */
    
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;
    --container-padding: var(--space-5);
    
    /* ----------------------------------------
     * EFFECTS
     * ---------------------------------------- */
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-glacial: 800ms cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Shadows */
    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-dramatic: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px rgba(166, 123, 190, 0.2);
    
    /* Blur */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    
    /* Border radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    
    /* ----------------------------------------
     * Z-INDEX SCALE
     * ---------------------------------------- */
    
    --z-base: 0;
    --z-above: 10;
    --z-nav: 100;
    --z-modal: 200;
    --z-overlay: 300;
}

/* ----------------------------------------
 * RESPONSIVE TYPOGRAPHY SCALING
 * ---------------------------------------- */

@media (min-width: 768px) {
    :root {
        --text-hero: 7rem;     /* 112px */
        --text-6xl: 5rem;      /* 80px */
        --text-5xl: 4rem;      /* 64px */
        --text-4xl: 3rem;      /* 48px */
        --text-3xl: 2.5rem;    /* 40px */
    }
}

@media (min-width: 1024px) {
    :root {
        --text-hero: 9rem;     /* 144px */
        --text-6xl: 6rem;      /* 96px */
        --container-padding: var(--space-8);
    }
}

@media (min-width: 1400px) {
    :root {
        --text-hero: 11rem;    /* 176px */
    }
}