/* Explain: Theme tokens for light and dark modes, including color palette and fonts. */
:root {
    /* Light Mode (Default) */
    --primary-color: #C59B4B;
    --primary-hover: #A8813B;
    --secondary-color: #FBF8F1;
    --accent-color: #C59B4B;
    --logo-subtitle-color: #C59B4B;
    --button-color: #C59B4B;
    --button-text: #FFFFFF;
    --background-color: #FBF8F1;
    --surface-color: #FFFFFF;
    --footer-bg: #F5EFE6;
    --text-color: #38281E;
    --text-muted: #7A6658;
    --border-color: rgba(197, 155, 75, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(197, 155, 75, 0.3);
    --nav-bg: rgba(251, 248, 241, 0.95);
    --field-bg: rgba(56, 40, 30, 0.05);
    --sage-soft: rgba(197, 155, 75, 0.08);
    --sage-dark: #C59B4B;
    --terracotta-soft: rgba(197, 155, 75, 0.12);
    --shadow-soft: 0 10px 40px rgba(56, 40, 30, 0.08);
    --shadow-button: 0 4px 15px rgba(197, 155, 75, 0.3);
    --font-heading: 'Cairo', sans-serif;
    --font-body: 'Tajawal', sans-serif;
    --font-logo: 'Cairo', sans-serif;
    --body-bg-overlay: rgba(251, 248, 241, 0.65);
    --body-bg-img: url('https://files.cdn-files-a.com/uploads/12403914/normal_6ab3eb91af318.png?format=avif');
    --logo-url: url('https://files.cdn-files-a.com/uploads/12403914/normal_6ab3e9752d25d.png?format=avif');
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode */
        --primary-color: #C59B4B;
        --primary-hover: #D4AF6A;
        --secondary-color: #0F0A08;
        --accent-color: #C59B4B;
        --logo-subtitle-color: #C59B4B;
        --button-color: #C59B4B;
        --button-text: #FFFFFF;
        --background-color: #0F0A08;
        --surface-color: #1A1310;
        --footer-bg: #0A0705;
        --text-color: #FDFBF7;
        --text-muted: #D0C8B8;
        --border-color: rgba(197, 155, 75, 0.3);
        --glass-bg: rgba(26, 19, 16, 0.85);
        --glass-border: rgba(197, 155, 75, 0.3);
        --nav-bg: rgba(15, 10, 8, 0.95);
        --field-bg: rgba(255, 255, 255, 0.05);
        --sage-soft: rgba(197, 155, 75, 0.08);
        --sage-dark: #C59B4B;
        --terracotta-soft: rgba(197, 155, 75, 0.12);
        --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.4);
        --shadow-button: 0 4px 15px rgba(197, 155, 75, 0.3);
        --body-bg-overlay: rgba(15, 10, 8, 0.75);
        --body-bg-img: url('https://files.cdn-files-a.com/uploads/12403914/normal_6ab3eb91af318.png?format=avif');
        --logo-url: url('https://files.cdn-files-a.com/uploads/12403914/normal_6abaa8f9d877e.png?format=avif');
    }
}

.brand-logo {
    content: var(--logo-url);
}