/* theme-tokens.css — surcharge LIGHT pour le toggle dark/light global.
 * Les vars dark restent définies inline dans :root de chaque dashboard
 * (cohérent avec dashboard-pro-dark.css). Ce fichier ne fait qu'ajouter
 * la branche light via body.theme-light qui surcharge les mêmes vars.
 *
 * Usage : <link rel="stylesheet" href="/public/css/theme-tokens.css">
 *         + dashboard-tabs.js (init/toggle/persist localStorage drivlife.theme)
 */

body.theme-light {
    /* Background + surfaces (M3 v1.7.1) */
    --bg: #F8F9FA;
    --surface: #FFFFFF;
    --surface2: #F1F3F5;
    --surface3: #E9ECEF;
    --border: #DEE2E6;
    --border-hover: #CED4DA;
    --text: #1A2535;
    --text-1: #1A2535;
    --text-2: #495057;
    --text-3: #868E96;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);

    /* Navy — header reste bleu accentué pour contraste cockpit pro même en light */
    --navy: #2E86DE;
    --navy-light: #54A0FF;
    --navy-mid: #3B96EE;

    /* Blue accent — saturé pour contraste sur fond clair (O.F v2.x) */
    --blue: #2E86DE;
    --blue-light: #54A0FF;
    --blue-dim: rgba(46, 134, 222, 0.08);
    --blue-border: rgba(46, 134, 222, 0.25);

    /* Green */
    --green: #16a34a;
    --green-dim: rgba(22, 163, 74, 0.08);
    --green-border: rgba(22, 163, 74, 0.25);

    /* Orange */
    --orange: #ea580c;
    --orange-dim: rgba(234, 88, 12, 0.08);
    --orange-border: rgba(234, 88, 12, 0.25);

    /* Red */
    --red: #dc2626;
    --red-dim: rgba(220, 38, 38, 0.08);
    --red-border: rgba(220, 38, 38, 0.25);

    /* Yellow */
    --yellow: #ca8a04;
    --yellow-dim: rgba(202, 138, 4, 0.08);
    --yellow-border: rgba(202, 138, 4, 0.25);

    /* Purple (admin-dashboard uniquement) */
    --purple: #7c3aed;
    --purple-dim: rgba(124, 58, 237, 0.08);
    --purple-border: rgba(124, 58, 237, 0.25);
}

/* Bouton toggle — visible dans les deux modes */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    transition: background .15s, border-color .15s;
    margin-left: 8px;
}
.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.35);
}
body.theme-light .theme-toggle-btn {
    border-color: rgba(255,255,255,0.4);
}