/* =========================================================
   LUMIÈRE MOMENTS
   THEME SYSTEM
   ========================================================= */


/* =========================================================
   LIGHT THEME
   ========================================================= */

html[data-theme="light"] {

    --color-background: #f5f1ea;
    --color-surface: #eee8df;
    --color-surface-2: #e5ddd1;

    --color-text: #3d3934;
    --color-heading: #211f1c;
    --color-muted: #777169;

    --color-border: #d8d0c4;

    --color-primary: #b98252;
    --color-primary-hover: #a96f3f;
    --color-primary-ink: #fffaf3;

    --color-nav-text: #38342f;

    --color-header-scrolled: rgba(245, 241, 234, 0.92);
    --color-header-mobile: rgba(245, 241, 234, 0.96);

    --color-dropdown: #f7f3ed;
    --color-mobile-menu: #f5f1ea;

    --color-footer: #24211e;
    --color-footer-text: #f5f1ea;
    --color-footer-muted: #aaa29a;

    --hero-title: #ffffff;
    --hero-description: rgba(255, 255, 255, 0.82);
    --hero-kicker: #e6bb92;

    --hero-overlay: rgba(20, 17, 14, 0.24);
    --hero-overlay-start: rgba(15, 12, 10, 0.58);
    --hero-overlay-end: rgba(15, 12, 10, 0.12);

    --philosophy-title: #ffffff;
    --philosophy-text: rgba(255, 255, 255, 0.78);
    --philosophy-overlay-start: rgba(20, 17, 14, 0.72);
    --philosophy-overlay-end: rgba(20, 17, 14, 0.2);

    --cta-title: #ffffff;
    --cta-text: rgba(255, 255, 255, 0.8);
    --cta-overlay-start: rgba(20, 17, 14, 0.74);
    --cta-overlay-end: rgba(20, 17, 14, 0.24);

    --shadow-header:
        0 8px 30px rgba(25, 20, 15, 0.08);

    --shadow-dropdown:
        0 18px 45px rgba(25, 20, 15, 0.13);

    --shadow-button:
        0 10px 25px rgba(45, 32, 22, 0.12);
}


/* =========================================================
   DARK THEME
   ========================================================= */

html[data-theme="dark"] {

    --color-background: #171514;
    --color-surface: #201d1a;
    --color-surface-2: #292521;

    --color-text: #e8e0d7;
    --color-heading: #f8f3ed;
    --color-muted: #aaa198;

    --color-border: #39332d;

    --color-primary: #d09a69;
    --color-primary-hover: #dda878;
    --color-primary-ink: #241b14;

    --color-nav-text: #e6ded5;

    --color-header-scrolled: rgba(23, 21, 20, 0.92);
    --color-header-mobile: rgba(23, 21, 20, 0.96);

    --color-dropdown: #211e1b;
    --color-mobile-menu: #171514;

    --color-footer: #100f0e;
    --color-footer-text: #eee7df;
    --color-footer-muted: #918980;

    --hero-title: #ffffff;
    --hero-description: rgba(255, 255, 255, 0.8);
    --hero-kicker: #e4b98f;

    --hero-overlay: rgba(8, 7, 6, 0.35);
    --hero-overlay-start: rgba(8, 7, 6, 0.7);
    --hero-overlay-end: rgba(8, 7, 6, 0.2);

    --philosophy-title: #ffffff;
    --philosophy-text: rgba(255, 255, 255, 0.76);
    --philosophy-overlay-start: rgba(8, 7, 6, 0.78);
    --philosophy-overlay-end: rgba(8, 7, 6, 0.28);

    --cta-title: #ffffff;
    --cta-text: rgba(255, 255, 255, 0.78);
    --cta-overlay-start: rgba(8, 7, 6, 0.78);
    --cta-overlay-end: rgba(8, 7, 6, 0.25);

    --shadow-header:
        0 10px 35px rgba(0, 0, 0, 0.25);

    --shadow-dropdown:
        0 20px 50px rgba(0, 0, 0, 0.35);

    --shadow-button:
        0 10px 28px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   THEME TRANSITIONS
   ========================================================= */

html,
body,
.site-header,
.mobile-menu,
.dropdown,
.service-card,
.event-card,
.package-card,
.stats,
.footer,
.control-btn,
.mobile-control,
.back-to-top {
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   SYSTEM FALLBACK
   Only used before explicit data-theme exists.
   ========================================================= */

html:not([data-theme]) {
    color-scheme: light;
}


/* =========================================================
   DARK IMAGE TREATMENT
   ========================================================= */

html[data-theme="dark"] .intro-image::after {
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .portfolio-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78),
        rgba(0, 0, 0, 0.05) 65%
    );
}


/* =========================================================
   FORM COLOR SUPPORT
   ========================================================= */

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}


/* =========================================================
   COLOR SCHEME
   ========================================================= */

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}