/*
    Theme Name: Lumiere Child
    Description: Child theme of Default, using Lumiere palette but Default structure.
    Author: Maxime Blanc
    Version: 1.1
*/

/* 
   NOTE: We do NOT import Lumiere/styles.css here.
   The parent theme (Default) CSS is loaded automatically by the system because it is the parent.
   We only override the variables to apply Lumiere's colors to Default's structure.
*/

:root {
    /* --- LUMIERE PALETTE DEFINITION --- */
    --lumiere-orange: #ff8c42;
    --lumiere-orange-hover: #ff7a2e;

    --lumiere-blue-dark: #1a3a5c;
    /* Used for heavy accents or footer */
    --lumiere-blue-light: #3b82f6;

    --lumiere-green: #10b981;
    --lumiere-green-hover: #059669;

    --lumiere-red: #ef4444;

    /* --- MAPPING TO DEFAULT THEME VARIABLES (LIGHT MODE) --- */

    /* Primary Action Color (was Cyan in Default) -> Orange from Lumiere */
    --primary-color: var(--lumiere-orange);
    --primary-hover-color: var(--lumiere-orange-hover);

    /* Secondary/Info Colors */
    --info-color: var(--lumiere-blue-light);
    --success-color: var(--lumiere-green);
    --alert-color: var(--lumiere-red);

    /* Header Structure -> KEEP DEFAULT STRUCTURE (White) to ensure contrast */
    --header-bg-color: #ffffff;
    --header-links-color: #415462;
    /* Lumiere font color */

    /* Body & Sections */
    --background-color: #fafafa;
    /* Lumiere background grey/white */
    --font-color: #415462;
    /* Lumiere font color */
    --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", sans-serif;

    /* Footer - Optional: Use Lumiere Blue for Footer to add character */
    --footer-bg: var(--lumiere-blue-dark);
    /* This variable might need custom rule if default doesn't use it same way */
}

/* Fix Footer background if Default theme uses specific selector */
#footer {
    background: var(--lumiere-blue-dark);
    color: #ffffff;
}

#footer a {
    color: #e2e8f0;
}

/* --- DARK MODE OVERRIDES (Nuit Palette) --- */
@media (prefers-color-scheme: dark) {
    :root {
        /* Base Colors - Slate Palette */
        --dark-background-color: #0f172a;
        /* Slate 900 */
        --dark-font-color: #e2e8f0;
        /* Slate 200 */

        /* Headers & Sections */
        --dark-header-bg-color: #020617;
        /* Slate 950 */
        --dark-header-links-color: #e2e8f0;

        --dark-section-bg-color: #1e293b;
        /* Slate 800 */
        --dark-section-head-bg-color: #0f172a;

        /* Forms */
        --dark-form-bg-color: #1e293b;
        --dark-form-border-color: #334155;

        /* Accents for Dark Mode */
        /* User requested Orange (Lumiere) instead of Sky Blue for Dark Mode */
        --dark-primary-color: #ff8c42;
        /* Orange */
        --dark-primary-hover-color: #ff7a2e;
        --dark-primary-inverse-color: #0f172a;

        /* --- PLUGIN COMPATIBILITY --- */
        /* Many plugins use generic variables (borrowed from default theme light mode) */
        /* We must FORCE map them to dark mode equivalents here */
        --panel-bg: var(--dark-section-bg-color);
        --panel-border: var(--dark-form-border-color);
        --table-bg: var(--dark-section-bg-color);
        --table-border: var(--dark-form-border-color);
        --input-bg: var(--dark-form-bg-color);
        --input-border: var(--dark-form-border-color);
        --modal-bg: var(--dark-section-bg-color);
    }

    /* Force Footer update in dark mode if needed */
    #footer {
        background: #020617;
        color: #94a3b8;
    }
}

/* Header Image Override - Use the local 'header.jpg' we copied from Lumiere's background.jpg or similar */
/* Default theme uses #banner unless custom. Let's force it if Default uses #banner */
#banner {
    background-image: url('header.jpg');
    background-size: cover;
    background-position: center;
}

/* Fix Z-Index Overlap with SearchUi */
/* SearchUi uses z-index:1000. We force Header to be higher. */
#header {
    z-index: 2000 !important;
    position: sticky;
    /* Ensure it stays sticky as defined in Default */
}

/* --- MANUAL TOGGLE SUPPORT (.theme-dark class) --- */
body.theme-dark {
    --background-color: #0f172a;
    --font-color: #e2e8f0;
    --header-bg-color: #020617;
    --header-links-color: #e2e8f0;
    --section-bg-color: #1e293b;
    --section-head-bg-color: #0f172a;
    --form-bg-color: #1e293b;
    --form-border-color: #334155;
    --primary-color: #ff8c42;
    /* Orange */
    --primary-hover-color: #ff7a2e;
}

body.theme-dark #footer {
    background: #020617;
    color: #94a3b8;
}