/*
 * Tokens de design EZ Link - SOURCE DE VERITE UNIQUE.
 *
 * Aucun autre fichier CSS ne doit declarer :root. Avant ce fichier, la palette
 * etait definie 5 fois (3 fois dans app_common.css, 1 fois dans dashboard.css,
 * 1 fois dans home.css) avec des valeurs contradictoires : la valeur effective
 * dependait de l'ordre d'import, ce qui rendait tout changement imprevisible
 * (cf docs/audit-uiux.md section 1).
 *
 * Convention des ombres :
 *  - --shadow, --shadow-md, --shadow-lg sont des COULEURS : `0 4px 12px var(--shadow-md)` ;
 *  - --elevation-* sont des ombres COMPLETES : `box-shadow: var(--elevation-lg)`.
 */

:root {
    /* ===== Marque ===== */
    --primary: #667eea;
    --primary-dark: #5568d3;
    --primary-darker: #764ba2;
    --primary-light: #8b9aef;
    --primary-lighter: #b5bff5;
    --secondary: #764ba2;
    /* Variantes accessibles : le violet de marque #667eea plafonne a 3.66:1 sur
       blanc, sous le seuil WCAG AA (4.5:1). Ces deux tokens servent des que la
       couleur porte du TEXTE, le #667eea restant reserve aux aplats et decors. */
    --primary-accessible: #4c5fd0;   /* texte violet sur fond clair : 5.45:1 */
    --primary-surface: #5b21af;      /* aplat portant du texte blanc : 9.2:1  */

    /* Alias historiques utilises par la vitrine (home.css) */
    --primary-purple: #667eea;
    --accent-pink: #764ba2;
    --dark-purple: #5b21af;
    --text-gray: #555;

    /* ===== Accents ===== */
    --accent-purple: #a855f7;
    --accent-blue: #3b82f6;
    --accent-teal: #14b8a6;

    /* ===== Etats ===== */
    --success: #10b981;
    --success-green: #10b981;
    --danger: #ef4444;
    --error-red: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* ===== Gris ===== */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ===== Surfaces et texte (theme clair) ===== */
    --bg-primary: #fff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    /* #6b7280 = contraste 4.83:1 sur blanc (WCAG AA). L'ancien #9ca3af tombait a 2.85:1 */
    --text-tertiary: #6b7280;
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;

    /* ===== Roles complementaires =====
       Introduits avec le theme sombre, ils doivent exister dans les deux
       themes : une variable vide ne se voit pas a la lecture du CSS, seulement
       a l'ecran. */
    --bg-elevated: #fff;        /* modales, menus deroulants, popovers      */
    --bg-sunken: #f3f4f6;       /* en-tete de tableau, bloc de code          */
    --bg-hover: #f3f4f6;        /* survol sur une surface                    */
    --text-disabled: #9ca3af;
    --border-subtle: #f3f4f6;
    --border-strong: #9ca3af;
    --primary-soft: #eef1fe;    /* aplat teinte marque                       */
    --primary-hover: #4351bd;
    --focus-ring: #4c5fd0;

    /* Paires semantiques fond / texte / bordure : elles etaient ecrites en dur
       dans une quinzaine de gabarits et de feuilles, donc invisibles au theme. */
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --success-border: #6ee7b7;
    --danger-bg: #fee2e2;
    --danger-text: #991b1b;
    --danger-border: #fca5a5;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --warning-border: #fcd34d;
    --info-bg: #dbeafe;
    --info-text: #1e40af;
    --info-border: #93c5fd;

    /* ===== Ombres : couleurs ===== */
    --shadow: rgba(0, 0, 0, .05);
    --shadow-md: rgba(0, 0, 0, .08);
    --shadow-lg: rgba(0, 0, 0, .12);

    /* ===== Ombres : elevations completes ===== */
    --elevation-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --elevation-md: 0 4px 6px -1px rgba(0, 0, 0, .1);
    --elevation-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);
    --elevation-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);
    --elevation-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);
    --elevation-colored: 0 10px 40px rgba(102, 126, 234, .3);
    /* Alias retro-compatibles : ces trois-la n'ont jamais eu de variante couleur */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);
    --shadow-colored: 0 10px 40px rgba(102, 126, 234, .3);

    /* ===== Degrades ===== */
    --gradient-purple: linear-gradient(135deg, #667eea, #764ba2);
    --gradient-pink: linear-gradient(135deg, #ec4899, #8b5cf6);
    --gradient-blue: linear-gradient(135deg, #3b82f6, #2563eb);
    --gradient-ocean: linear-gradient(135deg, #06b6d4, #0891b2);
    --gradient-sunset: linear-gradient(135deg, #f97316, #dc2626);
    --gradient-emerald: linear-gradient(135deg, #10b981, #059669);
    --gradient-rainbow: linear-gradient(135deg, #667eea, #ec4899 50%, #f59e0b);

    /* ===== Rayons ===== */
    --border-radius: 10px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ===== Transitions ===== */
    --transition: all .3s cubic-bezier(.4, 0, .2, 1);
    --transition-fast: all .15s ease;
    --transition-slow: all .5s ease;

    /* ===== Typographie ===== */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ===== Layout ===== */
    --sidebar-width: 260px;
}

/* ===== Theme sombre applicatif (tableau de bord, administration, connexion) ==
 *
 * Le bloc precedent se contentait d'inverser cinq fonds et trois couleurs de
 * texte. Tout le reste - bordures, ombres, semantique, marque, et surtout la
 * moitie haute de la rampe de gris - gardait ses valeurs claires : du texte
 * quasi noir sur fond nuit (1.42:1), des alertes en pastel eblouissantes, des
 * champs sans contour visible et des cartes qui ne se detachent pas du fond.
 *
 * Quatre principes :
 *
 * 1. Une seule famille de gris, ardoise legerement violacee, qui s'accorde au
 *    violet de marque la ou un gris neutre le fait virer au bleu.
 * 2. L'elevation se lit en s'ECLAIRCISSANT. Une ombre noire sur un fond presque
 *    noir n'existe pas : les elevations deviennent « lisere clair + halo noir
 *    large », le lisere portant l'essentiel de la lecture du relief.
 * 3. La rampe --gray-* est inversee EN ENTIER. La demi-inversion precedente
 *    laissait une centaine d'usages de gray-500 a gray-900 en quasi-noir.
 * 4. --primary, --primary-dark et les degrades ne sont pas surcharges : ce sont
 *    des aplats qui portent du texte blanc. Le role TEXTE de la marque passe par
 *    --primary-accessible, eclairci ici alors qu'il est assombri en clair.
 */
body.dark-mode {
    /* Cede les controles natifs au moteur : barres de defilement, listes
       deroulantes, selecteurs de date, et le jaune de l'auto-remplissage. */
    color-scheme: dark;

    /* ===== Fonds ===== */
    --bg-secondary: #10131c;   /* fond de page                                   */
    --bg-primary: #191d29;     /* cartes, barre laterale, en-tete                */
    --bg-tertiary: #232839;    /* survol d'une surface                           */
    --bg-hover: #232839;
    --bg-elevated: #2b3145;    /* modales, menus deroulants, popovers            */
    --bg-sunken: #0b0e15;      /* en-tete de tableau, bloc de code                */

    /* ===== Textes ===== */
    --text-primary: #f2f4f9;   /* 15.3:1 sur une carte  */
    --text-secondary: #b3bccf; /*  8.8:1                */
    --text-tertiary: #98a1b8;  /*  6.5:1                */
    --text-disabled: #737d94;  /*  4.1:1                */

    /* ===== Bordures ===== */
    --border-subtle: #232839;
    --border-primary: #363d55;
    /* 3.2:1 : un contour de champ porte de l'information, WCAG 1.4.11 exige 3:1.
       L'ancien #374151 tombait a 1.4:1 - on ne voyait plus ou cliquer. */
    --border-secondary: #616b8a;
    --border-strong: #616b8a;

    /* ===== Marque ===== */
    --primary-accessible: #a5b4fc;  /* texte de marque   - 8.4:1 */
    --primary-surface: #4c5fd0;     /* aplat, texte blanc - 5.5:1 */
    --primary-hover: #5a6cd8;
    --primary-soft: #232a4a;        /* aplat teinte, porte --primary-accessible a 7:1 */
    --focus-ring: #8da2fb;

    /* ===== Rampe de gris : inversion complete ===== */
    --gray-50: #232839;
    --gray-100: #2b3145;
    --gray-200: #363d55;
    --gray-300: #454d69;
    --gray-400: #737d94;
    --gray-500: #98a1b8;
    --gray-600: #b3bccf;
    --gray-700: #ccd3e2;
    --gray-800: #e2e7f0;
    --gray-900: #f2f4f9;

    /* ===== Semantique =====
       Les teintes pleines du theme clair vibrent sur fond sombre et le rouge y
       tombe a 3.9:1 : elles sont eclaircies et desaturees. Les FONDS, eux,
       etaient restes en pastel clair - des rectangles quasi blancs au milieu
       d'une interface sombre, la premiere chose que l'oeil voyait. */
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #60a5fa;
    --success-green: #34d399;
    --error-red: #f87171;

    --success-bg: #1c452f;
    --success-text: #6ee7b7;
    --success-border: #37a173;

    --danger-bg: #4a2226;
    --danger-text: #fca5a5;
    --danger-border: #b45f5f;

    --warning-bg: #443410;
    --warning-text: #fcd34d;
    --warning-border: #ab8320;

    --info-bg: #1c3157;
    --info-text: #93c5fd;
    --info-border: #4a80c8;

    /* ===== Ombres ===== */
    --shadow: rgba(0, 0, 0, .45);
    --shadow-md: rgba(0, 0, 0, .55);
    --shadow-lg: rgba(0, 0, 0, .70);

    --elevation-sm: 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .50);
    --elevation-md: 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 10px rgba(0, 0, 0, .55);
    --elevation-lg: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .60);
    --elevation-xl: 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 44px rgba(0, 0, 0, .65);
    --elevation-2xl: 0 0 0 1px rgba(255, 255, 255, .08), 0 32px 64px rgba(0, 0, 0, .72);
    --elevation-colored: 0 0 0 1px rgba(141, 162, 251, .25), 0 12px 36px rgba(102, 126, 234, .35);
    /* Ces quatre-la n'etaient pas surcharges du tout : les cartes douces
       n'avaient donc aucune ombre en sombre. */
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .50);
    --shadow-xl: 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 44px rgba(0, 0, 0, .65);
    --shadow-2xl: 0 0 0 1px rgba(255, 255, 255, .08), 0 32px 64px rgba(0, 0, 0, .72);
    --shadow-colored: 0 0 0 1px rgba(141, 162, 251, .25), 0 12px 36px rgba(102, 126, 234, .35);

    /* ===== Bootstrap =====
       Sa palette est verrouillee sur :root et aucune surcharge maison n'atteint
       .card, .table, .modal ni .dropdown-menu : les pages de connexion, les
       tableaux de facturation et les modales restaient blancs. Realignement sur
       la palette maison. */
    --bs-body-bg: var(--bg-secondary);
    --bs-body-color: var(--text-secondary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-tertiary);
    --bs-border-color: var(--border-primary);
    --bs-card-bg: var(--bg-primary);
    --bs-card-border-color: var(--border-primary);
    --bs-modal-bg: var(--bg-elevated);
    --bs-modal-border-color: var(--border-primary);
    --bs-dropdown-bg: var(--bg-elevated);
    --bs-dropdown-border-color: var(--border-primary);
    --bs-dropdown-link-color: var(--text-secondary);
    --bs-dropdown-link-hover-bg: var(--bg-hover);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-secondary-bg: var(--bg-hover);
    --bs-heading-color: var(--text-primary);
    --bs-link-color: var(--primary-accessible);
    --bs-link-hover-color: var(--focus-ring);
}

/* L'auto-remplissage de Chrome impose son jaune pale et son texte noir, qui
   ignorent toute couleur declaree : seule cette combinaison le corrige. */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset;
    caret-color: var(--text-primary);
}

/* Les avatars et bannieres televerses sont souvent transparents : sans support,
   un dessin sombre disparait sur un fond sombre. */
body.dark-mode .profile-picture-preview,
body.dark-mode .banner-preview {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
}