/**
 * theme.css — Design tokens Clean Auto Detailing.
 *
 * Palette dérivée du logo : « CLEAN AUTO » en dégradé rose/magenta,
 * « DETAILING » en bleu ciel, trait de la voiture en encre quasi-noire,
 * fond blanc. Toutes les surfaces du back-office consomment ces variables :
 * changer une valeur ici se propage partout.
 */

:root {
    /* --- Marque : rose / magenta (couleur principale) --- */
    --ca-pink:        #EC2E8E;   /* magenta principal (boutons, accents) */
    --ca-pink-deep:   #C81E76;   /* bas du dégradé / hover */
    --ca-pink-light:  #F9B6DC;   /* fonds doux, badges */
    --ca-pink-grad:   linear-gradient(180deg, #F792C9 0%, #EC2E8E 55%, #C81E76 100%);

    /* --- Accent : bleu ciel (« DETAILING ») --- */
    --ca-blue:        #2FA4E0;
    --ca-blue-deep:   #1E6FB8;
    --ca-blue-light:  #CDEBFB;
    --ca-link:        var(--ca-blue-deep);

    /* Dégradé des boutons principaux (même que le site public). */
    --ca-grad:        linear-gradient(135deg, #FF5FB1 0%, #EC2E8E 45%, #B4227C 100%);

    /* --- Encre & surfaces (fond gris très clair, cartes blanches) --- */
    --ca-ink:         #0E1015;   /* texte principal, trait */
    --ca-muted:       #5E6472;   /* texte secondaire */
    --ca-bg:          #F4F5F8;   /* fond page */
    --ca-surface:     #FFFFFF;   /* cartes, panneaux */
    --ca-surface-2:   #EEEEF3;
    --ca-line:        #E2E2E8;   /* bordures */
    --ca-field:       #FFFFFF;   /* champs de saisie */
    --ca-bar:         rgba(244,245,248,.82);   /* barre du haut (floutée) */

    /* --- États sémantiques (accessibles) --- */
    --ca-success:     #1E9E6A;
    --ca-success-bg:  #E4F6EE;
    --ca-danger:      #D93A4A;
    --ca-danger-bg:   #FBE7E9;
    --ca-warning:     #B8730B;
    --ca-warning-bg:  #FBF0DD;

    /* --- Typo --- */
    --ca-font-title: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
    --ca-font-body:  ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;

    /* --- Rayons, ombres, espacements --- */
    --ca-radius:     20px;
    --ca-radius-sm:  12px;
    --ca-shadow:     0 1px 1px rgba(14,16,21,.04), 0 10px 28px -14px rgba(14,16,21,.16);
    --ca-shadow-lg:  0 10px 40px rgba(200,30,118,.16);
    --ca-focus:      0 0 0 3px rgba(236,46,142,.35);

    /* Cible de confort tactile (usage mobile, gérant en déplacement) */
    --ca-tap: 44px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ca-ink:       #F4F5F8;
        --ca-muted:     #9AA0AE;
        --ca-bg:        #0B0C10;
        --ca-surface:   #15161C;
        --ca-surface-2: #1F2027;
        --ca-line:      #2C2E37;
        --ca-field:     #1C1D24;
        --ca-bar:       rgba(11,12,16,.8);
        --ca-shadow:    0 18px 40px -22px rgba(0,0,0,.7);
        --ca-blue-light:#13324A;
        --ca-link:      var(--ca-blue);
        --ca-success-bg:#0F2E22;
        --ca-danger-bg: #3A151B;
        --ca-warning-bg:#33250C;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --ca-ink:       #F4F5F8;
    --ca-muted:     #9AA0AE;
    --ca-bg:        #0B0C10;
    --ca-surface:   #15161C;
    --ca-surface-2: #1F2027;
    --ca-line:      #2C2E37;
    --ca-field:     #1C1D24;
    --ca-bar:       rgba(11,12,16,.8);
    --ca-shadow:    0 18px 40px -22px rgba(0,0,0,.7);
    --ca-blue-light:#13324A;
    --ca-link:      var(--ca-blue);
    --ca-success-bg:#0F2E22;
    --ca-danger-bg: #3A151B;
    --ca-warning-bg:#33250C;
    color-scheme: dark;
}