/**
 * CSS Custom Properties (Variables)
 * 
 * UPDATED: Larger fonts for better readability (age 40-55 demographic)
 * UPDATED: Larger logo size
 */

:root {
    /* Colors - Primary */
    --color-sage-green: #7A9B89;
    --color-soft-ivory: #FAF8F5;
    
    /* Colors - Accent & Action */
    --color-coral-blush: #E8B4A8;
    --color-coral-hover: #DC9E92;
    --color-coral-active: #D08D7E;
    --color-dusty-rose: #D4A5A5;
    --color-soft-mauve: #C9B7C7;
    
    /* Colors - Neutrals */
    --color-warm-charcoal: #4A4543;
    --color-warm-gray: #8A8480;
    --color-white: #FFFFFF;
    
    /* Typography - Fonts */
    --font-primary: 'Cormorant Garamond', serif;
    --font-secondary: 'Lato', sans-serif;
    
    /* Typography - Sizes (Desktop) - INCREASED FOR READABILITY */
    --font-size-h1: 52px;
    --font-size-h2: 40px;
    --font-size-h3: 30px;
    --font-size-h4: 24px;
    --font-size-body: 19px;
    --font-size-body-large: 21px;
    --font-size-body-small: 17px;
    --font-size-caption: 15px;
    --font-size-button: 20px;
    
    /* Logo Sizes - INCREASED */
    --logo-rooted-size: 32px;
    --logo-subtitle-size: 20px;
    
    /* Typography - Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Typography - Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.75;
    
    /* Spacing (8pt grid system) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;
    --space-5xl: 96px;
    
    /* Layout */
    --container-max: 1200px;
    --reading-width: 720px;
    --narrow-width: 600px;
    --mobile-padding: 20px;
    
    /* Borders */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-round: 50%;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-button: 0 2px 8px rgba(232, 180, 168, 0.3);
    --shadow-button-hover: 0 4px 12px rgba(232, 180, 168, 0.4);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-Index Layers */
    --z-navigation: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
}

/* Mobile Overrides */
@media (max-width: 768px) {
    :root {
        --font-size-h1: 38px;
        --font-size-h2: 32px;
        --font-size-h3: 26px;
        --font-size-h4: 22px;
        --font-size-body: 18px;
        --logo-rooted-size: 28px;
        --logo-subtitle-size: 18px;
    }
}