/* Sawariya Properties - Modern CSS Variables & Design System */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Theme-independent values */
    --gold: 41, 71%, 62%;        /* #E2B659 */
    --gold-dark: 41, 54%, 51%;   /* #C59B3F */
    --emerald: 142, 70%, 45%;    /* #10B981 */
    --whatsapp-color: 142, 70%, 40%;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Light Mode Tokens (Default) */
    --bg-primary: 0, 0%, 98%;          /* #FAFAFA */
    --bg-secondary: 220, 20%, 94%;      /* #ECEFF4 */
    --bg-card: 0, 0%, 100%;            /* #FFFFFF */
    --bg-glass: 0, 0%, 100%, 0.75;      
    --border-glass: 0, 0%, 100%, 0.4;
    
    --text-primary: 217, 30%, 12%;      /* Deep Slate #141C24 */
    --text-secondary: 215, 15%, 40%;    /* Muted Slate #5A6A7D */
    --text-light: 0, 0%, 100%;          
    
    --shadow-soft: 217, 30%, 12%, 0.05;
    --shadow-medium: 217, 30%, 12%, 0.1;
    --shadow-luxury: 0px 20px 40px rgba(11, 25, 44, 0.08);
    
    --border-color: 220, 15%, 88%;
}

[data-theme="dark"] {
    /* Dark Mode Tokens */
    --bg-primary: 220, 30%, 6%;         /* Very deep dark blue #080C11 */
    --bg-secondary: 217, 30%, 10%;      /* Slightly lighter dark #111721 */
    --bg-card: 217, 30%, 12%;           /* Elegant card dark #141C28 */
    --bg-glass: 217, 30%, 10%, 0.7;     
    --border-glass: 217, 30%, 20%, 0.3;
    
    --text-primary: 210, 20%, 98%;      /* Off-white #FAFAFB */
    --text-secondary: 215, 15%, 65%;    /* Soft grey-blue #9CA9B9 */
    --text-light: 0, 0%, 100%;
    
    --shadow-soft: 0, 0%, 0%, 0.2;
    --shadow-medium: 0, 0%, 0%, 0.4;
    --shadow-luxury: 0px 25px 50px rgba(0, 0, 0, 0.5);
    
    --border-color: 217, 30%, 18%;
}