/* ============================================================
   VARIABLES.CSS — Lakay Company
   Fichier central : couleurs, dimensions, transitions
   Support mode sombre via [data-theme="dark"] sur <html>
   Version : 1.0
   ============================================================ */

/* ==========================================================
   MODE CLAIR (par défaut)
   ========================================================== */
:root {
    /* ----- IDENTITÉ LAKAY ----- */
    --lk-blue:          #00209F;
    --lk-blue-dk:       #001580;
    --lk-blue-lt:       #E6EBFF;

    --lk-red:           #D21034;
    --lk-red-dk:        #A80028;
    --lk-red-lt:        #FFE6EC;

    --lk-green:         #2E7D32;
    --lk-green-dk:      #1B5E20;
    --lk-green-lt:      #E8F5E9;

    --lk-gold:          #F5A623;
    --lk-gold-lt:       #FFF3CD;
    --lk-gold-text:     #7A4F00;

    /* ----- NEUTRES ----- */
    --lk-bg:            #F5F5F5;
    --lk-bg-alt:        #EEF0F8;
    --lk-bg-soft:       #F8FAFF;
    --lk-white:         #FFFFFF;

    --lk-text:          #1A1A1A;
    --lk-text-soft:     #334155;
    --lk-muted:         #666666;
    --lk-muted-lt:      #94A3B8;

    --lk-border:        #E0E0E0;
    --lk-border-lt:     #F1F5F9;

    --lk-on-accent:     #FFFFFF;

    /* ----- FOOTER (specifique) ----- */
    --lk-footer-bg:     #0F172A;
    --lk-footer-bg-dk:  #060C18;
    --lk-footer-text:   #94A3B8;
    --lk-footer-head:   #FFFFFF;

    /* ----- EFFETS ----- */
    --lk-shadow:        0 2px 12px rgba(0, 0, 0, 0.08);
    --lk-shadow-md:     0 4px 20px rgba(0, 0, 0, 0.12);
    --lk-shadow-lg:     0 16px 40px rgba(0, 32, 159, 0.18);

    /* ----- DIMENSIONS ----- */
    --lk-radius-xs:     2px;
    --lk-radius-sm:     4px;
    --lk-radius:        6px;
    --lk-radius-md:     8px;
    --lk-radius-lg:     12px;
    --lk-radius-xl:     16px;
    --lk-radius-pill:   999px;

    /* ----- HEADER ----- */
    --lk-h-topbar:      50px;
    --lk-h-header:      64px;

    /* ----- TRANSITIONS ----- */
    --lk-trans-fast:    0.15s ease;
    --lk-trans:         0.25s ease;
    --lk-trans-slow:    0.4s ease;

    /* ----- FONTS ----- */
    --lk-font-title:    'Fraunces', Georgia, serif;
    --lk-font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================
   MODE SOMBRE
   ========================================================== */
html[data-theme="dark"] {
    /* ----- IDENTITÉ (bleu plus clair pour contraste) ----- */
    --lk-blue:          #3B82F6;
    --lk-blue-dk:       #2563EB;
    --lk-blue-lt:       #1E3A8A;

    --lk-red:           #EF4444;
    --lk-red-dk:        #DC2626;
    --lk-red-lt:        #7F1D1D;

    --lk-green:         #22C55E;
    --lk-green-dk:      #16A34A;
    --lk-green-lt:      #14532D;

    --lk-gold:          #FBBF24;
    --lk-gold-lt:       #78350F;
    --lk-gold-text:     #FDE68A;

    /* ----- NEUTRES INVERSÉS ----- */
    --lk-bg:            #0F172A;
    --lk-bg-alt:        #1E293B;
    --lk-bg-soft:       #1A2438;
    --lk-white:         #1A2438;

    --lk-text:          #E2E8F0;
    --lk-text-soft:     #CBD5E1;
    --lk-muted:         #94A3B8;
    --lk-muted-lt:      #64748B;

    --lk-border:        #334155;
    --lk-border-lt:     #1E293B;

    /* ----- FOOTER (encore plus sombre) ----- */
    --lk-footer-bg:     #060C18;
    --lk-footer-bg-dk:  #02060D;
    --lk-footer-text:   #94A3B8;
    --lk-footer-head:   #F1F5F9;

    /* ----- OMBRES ATTÉNUÉES ----- */
    --lk-shadow:        0 2px 12px rgba(0, 0, 0, 0.4);
    --lk-shadow-md:     0 4px 20px rgba(0, 0, 0, 0.5);
    --lk-shadow-lg:     0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ==========================================================
   APPLICATION GLOBALE
   ========================================================== */
html {
    color-scheme: light;
}
html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background-color: var(--lk-bg);
    color: var(--lk-text);
    font-family: var(--lk-font-body);
    transition: background-color var(--lk-trans-slow),
                color var(--lk-trans-slow);
}

/* Transition douce lors du switch de thème */
.lk-header,
.lk-topbar,
.lk-footer,
.lk-card,
.lk-sidebar,
.lk-minicart,
.lk-user-dropdown,
.lk-mobile-nav,
.lk-search-mobile,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    transition: background-color var(--lk-trans-slow),
                color var(--lk-trans-slow),
                border-color var(--lk-trans-slow);
}

/* ============================================================
   REDÉFINIR LES VARIABLES WOOCOMMERCE
   Pour que tous les composants Woo utilisent nos couleurs Lakay
   ============================================================ */
:root {
    /* Couleurs WooCommerce = couleurs Lakay */
    --wc-red:          var(--lk-red, #D21034);
    --wc-green:        var(--lk-green, #2E7D32);
    --wc-blue:         var(--lk-blue, #00209F);
    --wc-yellow:       var(--lk-gold, #F5A623);

    /* Texte sur couleurs WooCommerce */
    --wc-text-on-color: #FFFFFF;

    /* Formulaires WooCommerce */
    --wc-form-border-color:  var(--lk-border, #E0E0E0);
    --wc-form-border-radius: 10px;
    --wc-form-border-width:  1.5px;
    --wc-form-color-text:    var(--lk-text, #1A1A1A);
    --wc-form-color-background: #FFFFFF;
}

html[data-theme="dark"] {
    --wc-red:          #F87171;
    --wc-green:        #22C55E;
    --wc-blue:         #3B82F6;
    --wc-yellow:       #FBBF24;

    --wc-form-border-color:    #334155;
    --wc-form-color-text:      #E2E8F0;/* ============================================================
   VARIABLES.CSS — Lakay Company
   ------------------------------------------------------------
   Rôle : source unique de vérité pour toutes les variables CSS
          du thème enfant (couleurs, dimensions, transitions).

   Structure :
     1. IDENTITÉ LAKAY (mode clair)
     2. IDENTITÉ LAKAY (mode sombre)
     3. VARIABLES WOOCOMMERCE (mode clair)
     4. VARIABLES WOOCOMMERCE (mode sombre)
     5. APPLICATION GLOBALE

   Convention :
     --lk-*    → variables Lakay (utilisées partout)
     --wc-*    → variables WooCommerce (redéfinies pour l'identité)
     --lkm-*   → Mon Compte  (dans css/lakay-kont-mwen.css)
     --lkc-*   → Carrousel   (dans css/lakay-carousel.css)
     --lk-hd-* → Header      (dans css/lakay-header.css)
     --lk-ft-* → Footer      (dans css/lakay-footer.css)

   Ne JAMAIS définir une variable --lk-* ailleurs que dans ce fichier.
   ============================================================ */


/* ============================================================
   1. IDENTITÉ LAKAY — MODE CLAIR (par défaut)
   ============================================================ */
:root {

    /* ----- 1.1 Couleurs de marque ----- */
    --lk-blue:              #00209F;   /* Bleu Lakay (primaire) */
    --lk-blue-dk:           #001580;   /* Bleu Lakay foncé (hover) */
    --lk-blue-lt:           #E6EBFF;   /* Bleu Lakay très clair (fonds) */

    --lk-red:               #D21034;   /* Rouge Lakay (accent) */
    --lk-red-dk:            #A80028;   /* Rouge Lakay foncé (hover) */
    --lk-red-lt:            #FFE6EC;   /* Rouge Lakay très clair (fonds) */

    --lk-green:             #2E7D32;   /* Vert Lakay (succès, valider) */
    --lk-green-dk:          #1B5E20;   /* Vert Lakay foncé (hover) */
    --lk-green-lt:          #E8F5E9;   /* Vert Lakay très clair (fonds) */

    --lk-gold:              #F5A623;   /* Or Lakay (doré, badges promo) */
    --lk-gold-lt:           #FFF3CD;   /* Or Lakay très clair (fonds) */
    --lk-gold-text:         #7A4F00;   /* Texte posé sur fond doré */

    /* ----- 1.2 Neutres ----- */
    --lk-bg:                #F5F5F5;   /* Fond général du site */
    --lk-bg-alt:            #EEF0F8;   /* Fond alternatif (sections) */
    --lk-bg-soft:           #F8FAFF;   /* Fond très doux (cartes, champs) */
    --lk-white:             #FFFFFF;   /* Surface blanche (⚠ voir --lk-on-accent) */

    --lk-text:              #1A1A1A;   /* Texte principal */
    --lk-text-soft:         #334155;   /* Texte secondaire */
    --lk-muted:             #666666;   /* Texte atténué (labels, aides) */
    --lk-muted-lt:          #94A3B8;   /* Texte très atténué (placeholders) */

    --lk-border:            #E0E0E0;   /* Bordures standards */
    --lk-border-lt:         #F1F5F9;   /* Bordures très claires */

    /* Texte posé SUR une couleur vive (bouton bleu/rouge/vert, topbar…).
       NE PAS utiliser --lk-white pour ce cas : en mode sombre, --lk-white
       devient une surface sombre et le texte deviendrait invisible. */
    --lk-on-accent:         #FFFFFF;

    /* ----- 1.3 Footer (fond toujours sombre) ----- */
    --lk-footer-bg:         #0F172A;
    --lk-footer-bg-dk:      #060C18;
    --lk-footer-text:       #94A3B8;
    --lk-footer-head:       #FFFFFF;

    /* ----- 1.4 Ombres ----- */
    --lk-shadow:            0 2px 12px rgba(0, 0, 0, 0.08);
    --lk-shadow-md:         0 4px 20px rgba(0, 0, 0, 0.12);
    --lk-shadow-lg:         0 16px 40px rgba(0, 32, 159, 0.18);

    /* ----- 1.5 Rayons de bordure ----- */
    --lk-radius-xs:         2px;
    --lk-radius-sm:         4px;
    --lk-radius:            6px;
    --lk-radius-md:         8px;
    --lk-radius-lg:         12px;
    --lk-radius-xl:         16px;
    --lk-radius-pill:       999px;

    /* ----- 1.6 Dimensions du header ----- */
    --lk-h-topbar:          50px;
    --lk-h-header:          64px;

    /* ----- 1.7 Transitions ----- */
    --lk-trans-fast:        0.15s ease;
    --lk-trans:             0.25s ease;
    --lk-trans-slow:        0.4s ease;

    /* ----- 1.8 Polices ----- */
    --lk-font-title:        'Fraunces', Georgia, serif;
    --lk-font-body:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ----- 1.9 Variables WooCommerce (miroir Lakay) ----- */
    --wc-red:               var(--lk-red);
    --wc-green:             var(--lk-green);
    --wc-blue:              var(--lk-blue);
    --wc-yellow:            var(--lk-gold);

    --wc-text-on-color:     #FFFFFF;

    --wc-form-border-color:     var(--lk-border);
    --wc-form-border-radius:    10px;
    --wc-form-border-width:     1.5px;
    --wc-form-color-text:       var(--lk-text);
    --wc-form-color-background: #FFFFFF;
}


/* ============================================================
   2. IDENTITÉ LAKAY — MODE SOMBRE
   Activé par <html data-theme="dark">
   Les couleurs claires sont inversées ou remplacées pour garantir
   un contraste WCAG AA sur fond sombre.
   ============================================================ */
html[data-theme="dark"] {

    /* ----- 2.1 Couleurs de marque (variantes claires) ----- */
    --lk-blue:              #3B82F6;
    --lk-blue-dk:           #2563EB;
    --lk-blue-lt:           #1E3A8A;

    --lk-red:               #EF4444;
    --lk-red-dk:            #DC2626;
    --lk-red-lt:            #7F1D1D;

    --lk-green:             #22C55E;
    --lk-green-dk:          #16A34A;
    --lk-green-lt:          #14532D;

    --lk-gold:              #FBBF24;
    --lk-gold-lt:           #78350F;
    --lk-gold-text:         #FDE68A;

    /* ----- 2.2 Neutres inversés ----- */
    --lk-bg:                #0F172A;
    --lk-bg-alt:            #1E293B;
    --lk-bg-soft:           #1A2438;
    --lk-white:             #1A2438;   /* Surface = gris bleu foncé */

    --lk-text:              #E2E8F0;
    --lk-text-soft:         #CBD5E1;
    --lk-muted:             #94A3B8;
    --lk-muted-lt:          #64748B;

    --lk-border:            #334155;
    --lk-border-lt:         #1E293B;

    --lk-on-accent:         #FFFFFF;   /* Reste blanc (texte sur boutons vifs) */

    /* ----- 2.3 Footer (encore plus sombre) ----- */
    --lk-footer-bg:         #060C18;
    --lk-footer-bg-dk:      #02060D;
    --lk-footer-text:       #94A3B8;
    --lk-footer-head:       #F1F5F9;

    /* ----- 2.4 Ombres atténuées ----- */
    --lk-shadow:            0 2px 12px rgba(0, 0, 0, 0.4);
    --lk-shadow-md:         0 4px 20px rgba(0, 0, 0, 0.5);
    --lk-shadow-lg:         0 16px 40px rgba(0, 0, 0, 0.6);

    /* ----- 2.5 Variables WooCommerce (miroir Lakay sombre) ----- */
    --wc-red:               #F87171;
    --wc-green:             #22C55E;
    --wc-blue:              #3B82F6;
    --wc-yellow:            #FBBF24;

    --wc-form-border-color:     #334155;
    --wc-form-color-text:       #E2E8F0;
    --wc-form-color-background: #0F172A;
}


/* ============================================================
   3. APPLICATION GLOBALE
   Ces règles utilisent les variables ci-dessus. Elles s'appliquent
   partout et basculent automatiquement selon le thème actif.
   ============================================================ */

/* Indique au navigateur le schéma de couleurs en cours.
   Cela ajuste automatiquement les scrollbars, les champs natifs,
   les cases à cocher natives, etc. */
html {
    color-scheme: light;
}
html[data-theme="dark"] {
    color-scheme: dark;
}

/* Fond + couleur du texte par défaut du site */
body {
    background-color: var(--lk-bg);
    color: var(--lk-text);
    font-family: var(--lk-font-body);
    transition: background-color var(--lk-trans-slow),
                color var(--lk-trans-slow);
}

/* Transition douce lors du passage clair ↔ sombre
   (uniquement sur les conteneurs principaux, pour éviter de
    ralentir le rendu sur de longues listes) */
.lk-header,
.lk-topbar,
.lk-footer,
.lk-card,
.lk-sidebar,
.lk-minicart,
.lk-user-dropdown,
.lk-mobile-nav,
.lk-search-mobile,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    transition: background-color var(--lk-trans-slow),
                color var(--lk-trans-slow),
                border-color var(--lk-trans-slow);
}
    --wc-form-color-background: #0F172A;
}