/* Oudessence Theme Variables - Luxury Dark/Light Mode System */

:root[data-theme="light"] {
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #FAFAFA;
    --color-bg-tertiary: #F5F5F5;
    --color-text-primary: #000000;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-accent: #D4AF37;
    --color-accent-hover: #B8860B;
    --color-border: #E5E5E5;
    --color-input-bg: #FFFFFF;
    --color-input-border: #CCCCCC;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-overlay: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    
    /* Branding specific overrides */
    --oud-bg: #F6F3EE;
    --oud-bg-alt: #FFFFFF;
    --oud-text: #111111;
    --footer-bg: #f9f7f3;
    --color-bg-accent-light: #ecf5ff;
}

:root[data-theme="dark"] {
    --color-bg-primary: #0d0d00;
    --color-bg-secondary: #0d0d00;
    --color-bg-tertiary: #1E1E1E;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #B0B0B0;
    --color-text-muted: #808080;
    --color-accent: #D4AF37;
    --color-accent-hover: #FFC107;
    --color-border: #404040;
    --color-input-bg: #2A2A2A;
    --color-input-border: #505050;
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-overlay: rgba(0, 0, 0, 0.4);
    --glass-bg: rgba(15, 15, 15, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Branding specific overrides */
    --oud-bg: #0d0d00;
    --oud-bg-alt: #1E1E1E;
    --oud-text: #FFFFFF;
    --footer-bg: #0d0d00;
    --color-bg-accent-light: #151921;
}

:root {
    /* Brand Accent Colors (Maintain in Both Modes) */
    --color-gold-primary: #D4AF37;
    --color-gold-light: #F5D88A;
    --color-gold-dark: #B8860B;
    --color-discount: #FF6B00;
    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-error: #E74C3C;

    --transition-duration: 300ms;
}

/* Global body transitions */
body {
    transition: background-color var(--transition-duration) ease,
                color var(--transition-duration) ease,
                border-color var(--transition-duration) ease,
                box-shadow var(--transition-duration) ease;
}

/* Specific elements that need smooth transitions */
header, .navbar, .topbar, .card, .footer, .page-footer, button, input, select, textarea {
    transition: background-color var(--transition-duration) ease,
                color var(--transition-duration) ease,
                border-color var(--transition-duration) ease,
                box-shadow var(--transition-duration) ease;
}

/* Dark mode image refinements */
[data-theme="dark"] img:not(.no-filter) {
    filter: brightness(0.9) contrast(1.1);
}

[data-theme="dark"] .card {
    border: 1px solid var(--color-border) !important;
}