/* Design System Variables - Dr. Ramesh Vishwanath's Dermatology Clinic */

:root {
    /* Color Palette - Luxury Skincare Editorial & Clinical Trust */
    --color-bg-primary: #FCFAF7;       /* Warm luxurious ivory cream */
    --color-bg-secondary: #F6EFE9;     /* Soft sandy sand/beige */
    --color-bg-tertiary: #E8DED4;      /* Mid-tone warm clay/beige */
    --color-bg-card: rgba(255, 255, 255, 0.75); /* Soft semi-transparent ivory white */
    
    --color-text-primary: #2B231F;     /* Rich editorial charcoal-bronze */
    --color-text-secondary: #5C504A;   /* Muted organic clay-brown */
    --color-text-muted: #8A7E77;       /* Light earthy stone gray */
    
    --color-brand-gold: #C5A059;       /* Antique brand gold */
    --color-brand-gold-light: #DFCDA5; /* Warm light gold tint */
    --color-brand-sage: #8E9A86;       /* Healing medical sage green */
    --color-brand-sage-light: #B4C0AD; /* Soft calming green highlight */
    --color-brand-rose: #D2A18C;       /* Hydration/skin health warm coral-peach */
    --color-brand-rose-light: #F0DDD4; /* Pale peach skin tint */
    --color-accent-crimson: #B05244;   /* Luxurious warm alert/red accent */

    /* Typography Systems - Luxury Editorial Scales */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font Weight Tokens */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    
    /* Spacing Scales (Fluid Spacing) */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 6rem;
    
    /* Border Radius Tokens */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Shadow Systems - Organic Soft Depths */
    --shadow-sm: 0 2px 8px rgba(43, 35, 31, 0.04);
    --shadow-md: 0 8px 24px rgba(43, 35, 31, 0.06);
    --shadow-lg: 0 16px 48px rgba(43, 35, 31, 0.08);
    --shadow-glass: 0 8px 32px 0 rgba(43, 35, 31, 0.04);
    
    /* Elegant Transitions */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Max Widths */
    --container-max: 1320px;
    --container-narrow: 840px;
    
    /* Z-Index Scales */
    --z-back: -10;
    --z-base: 1;
    --z-above: 10;
    --z-header: 100;
    --z-modal: 1000;
}