/* css/variables.css */
:root {
    /* Colors - Light Mode */
    /*--background: #F4F1EA;*/
    --background: #fef3de;
    --surface: #FFFFFF;
    --surface-secondary: #EAE5DA;
    --text: #18211F;
    --text-secondary: #56605C;
    --accent: #315C55;
    --accent-light: #D5E3DE;
    --border: #D9D5CC;
    --highlight: #C9A66B;
    
    /* Typography */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    
    /* Layout */
    --container: 1280px;
    --reading-width: 720px;
    --space-section: clamp(60px, 8vw, 80px);
    --space-section-sm: clamp(40px, 5vw, 60px);
    
    /* Transitions */
    --transition-base: 350ms ease;
    --transition-fast: 250ms ease;
    
    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1.05rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;
}

[data-theme="dark"] {
    --background: #101817;
    --surface: #18211F;
    --surface-secondary: #202A27;
    --text: #F2F0E9;
    --text-secondary: #AEB8B3;
    --accent: #8EB8AD;
    --accent-light: #304742;
    --border: #33413D;
    --highlight: #D4B477;
}