/* ================================================
   CSS CUSTOM PROPERTIES (Variables)
   Sacred Sanctuary Color Palette
   ================================================ */

:root {
    /* Primary Colors */
    --color-primary: #003366;        /* Deep Blue - Trust & Depth */
    --color-gold: #D4AF37;           /* Warm Gold - Spirituality */
    --color-gold-hover: #F4C430;     /* Bright Gold - Interaction */
    
    /* Backgrounds */
    --color-bg-cream: #fcfaf6;       /* Warm Cream - Soft Comfort */
    --color-bg-light: #f9f9f9;       /* Off-White - Airiness */
    --color-white: #ffffff;          /* Pure White */
    
    /* Text */
    --color-text-primary: #333333;   /* Charcoal - Primary Text */
    --color-text-secondary: #555555; /* Gray - Secondary Text */
    --color-text-light: #888888;     /* Light Gray */
    
    /* Accents */
    --color-pale-gold: #f8f3e6;      /* Pale Gold - Section BG */
    --color-shadow: rgba(0, 51, 102, 0.1);
    --color-shadow-deep: rgba(0, 51, 102, 0.2);
    
    /* Typography */
    --font-serif: "Playfair Display", "Cormorant Garamond", serif;
    --font-sans: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-script: "Dancing Script", cursive;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    --transition-fade: opacity 0.3s ease-in-out;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px var(--color-shadow);
    --shadow-md: 0 5px 15px var(--color-shadow);
    --shadow-lg: 0 10px 30px var(--color-shadow-deep);
    --shadow-xl: 0 15px 40px var(--color-shadow-deep);
    
    /* Z-index */
    --z-nav: 1000;
    --z-modal: 2000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #f5f5f5;
        --color-text-secondary: #d0d0d0;
        --color-bg-light: #1a1a1a;
        --color-bg-cream: #2a2520;
    }
}