/**
 * tokens.css — Design tokens partagés entre toutes les apps EVYA.
 *
 * Objectif : centraliser les valeurs sémantiques (couleurs alertes, espacements,
 * tailles tactiles, contraste) sans toucher aux palettes brand de chaque app.
 *
 * Chaque layout (client/driver/admin/website) garde ses variables locales
 * (--brand, --accent, --site-*, --cs-*) ; seules les valeurs UTILISÉES PARTOUT
 * sont déclarées ici, en :root.
 *
 * Importé en premier dans chaque layout pour servir de base.
 *
 * Ne PAS supprimer/écraser de tokens existants — additif uniquement.
 */
:root {
    /* ──────────────────────────────────────────────────────────────────
       BRAND EVYA — palette bleu nuit profond (verrouillée 2026-05-25)
       Cohérente avec la maquette de référence : sobre, premium, business.
       ────────────────────────────────────────────────────────────────── */
    --ev-primary-50:  #F2F2F7;      /* hover sur surface blanche, backgrounds très clairs */
    --ev-primary-100: #E0E0EC;      /* badges info, sections highlighted */
    --ev-primary-200: #B8B8D0;      /* borders accent, tags */
    --ev-primary-300: #5D5D8C;      /* placeholder, disabled foreground */
    --ev-primary-400: #3D3D6B;      /* hover sur fond clair */
    --ev-primary-500: #2A2A50;      /* hover sur surfaces primary */
    --ev-primary-600: #1C1C3A;      /* PRIMARY EVYA — violet vif maquette (CTA) */
    --ev-primary-700: #13132C;      /* primary pressed */
    --ev-primary-900: #0A0A1F;      /* dark backgrounds */
    --ev-on-primary:  #FFFFFF;      /* texte/icône sur fond primary */

    /* ──────────────────────────────────────────────────────────────────
       NEUTRES — surfaces, textes, borders
       ────────────────────────────────────────────────────────────────── */
    --ev-white:       #FFFFFF;
    --ev-gray-50:     #FAFAFC;      /* page background */
    --ev-gray-100:    #F4F4F7;      /* section backgrounds */
    --ev-gray-200:    #E5E5EA;      /* borders subtiles */
    --ev-gray-300:    #D1D1D6;      /* borders inputs */
    --ev-gray-400:    #A1A1AA;      /* placeholder */
    --ev-gray-500:    #71717A;      /* muted text */
    --ev-gray-700:    #3F3F46;      /* body text secondary */
    --ev-gray-900:    #18181B;      /* body text primary */

    /* ──────────────────────────────────────────────────────────────────
       DARK MODE — driver app (cohérent avec primary)
       ────────────────────────────────────────────────────────────────── */
    --ev-dark-bg:           #0A0A1F;    /* page bg = primary-900 */
    --ev-dark-surface:      #13132C;    /* cards = primary-700 */
    --ev-dark-surface-2:    #1C1C3A;    /* cards hover = primary-600 */
    --ev-dark-border:       rgba(255, 255, 255, 0.08);
    --ev-dark-border-strong:rgba(255, 255, 255, 0.16);
    --ev-dark-text:         #FFFFFF;
    --ev-dark-text-muted:   #9CA0B5;    /* contraste AA conservé sur dark-bg */
    --ev-dark-accent:       #FFFFFF;    /* CTA dark = inversion : blanc sur sombre */
    --ev-dark-accent-soft:  #2A2A50;    /* CTA secondaire dark */

    /* ── Couleurs sémantiques universelles (états, alertes) ────────────── */
    --evya-success: #15803d;        /* vert : confirmations, statut OK */
    --evya-success-bg: #dcfce7;
    --evya-success-border: #86efac;
    --evya-danger: #dc2626;         /* rouge : erreurs, suppressions */
    --evya-danger-bg: #fee2e2;
    --evya-danger-border: #fca5a5;
    --evya-warning: #d97706;        /* orange : attention, en attente */
    --evya-warning-bg: #fef3c7;
    --evya-warning-border: #fde68a;
    --evya-info: #0369a1;           /* bleu : info, neutre */
    --evya-info-bg: #dbeafe;
    --evya-info-border: #93c5fd;

    /* ── Échelle d'espacement (0.25rem step) ───────────────────────────── */
    --evya-space-1: 4px;
    --evya-space-2: 8px;
    --evya-space-3: 12px;
    --evya-space-4: 16px;
    --evya-space-5: 20px;
    --evya-space-6: 24px;
    --evya-space-8: 32px;

    /* ── Rayons de bordure normalisés ──────────────────────────────────── */
    --evya-radius-sm: 6px;
    --evya-radius-md: 10px;
    --evya-radius-lg: 14px;
    --evya-radius-pill: 999px;

    /* ── Tailles tactiles (WCAG 2.5.5 = 44x44 ; cible EVYA = 48-56) ───── */
    --evya-touch-min: 48px;         /* hauteur minimum de tout bouton/lien tappable */
    --evya-touch-cta: 56px;         /* CTA primaires (Réserver, Accepter, etc.) */
    --evya-touch-critical: 64px;    /* actions vitales en course (Démarrer, Terminer) */

    /* ── Échelle typographique ────────────────────────────────────────── */
    --evya-text-xs: 12px;           /* legal, footer (lisible mais discret) */
    --evya-text-sm: 13px;           /* labels, méta */
    --evya-text-base: 15px;         /* body cible mobile (relevé de 14 à 15) */
    --evya-text-lg: 17px;           /* sous-titres */
    --evya-text-xl: 22px;           /* titres section */
    --evya-text-2xl: 28px;          /* titres écran */

    /* ── Contraste textes muted (>= 4.5:1 sur fond blanc) ──────────────── */
    --evya-muted: #475569;          /* slate-600 = ratio 8.6:1 sur blanc */
    --evya-muted-soft: #64748b;     /* slate-500 = ratio 7.2:1 sur blanc */
    --evya-muted-on-dark: rgba(255, 255, 255, 0.85); /* nav/footer dark */

    /* ── Ombres normalisées ───────────────────────────────────────────── */
    --evya-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --evya-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --evya-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
    --evya-shadow-cta: 0 6px 18px rgba(245, 158, 11, 0.25); /* CTA primaire */

    /* ── Z-index normalisés ───────────────────────────────────────────── */
    --evya-z-nav: 50;
    --evya-z-sticky: 60;
    --evya-z-overlay: 998;
    --evya-z-sheet: 999;
    --evya-z-toast: 1100;

    /* ── Animations standard ──────────────────────────────────────────── */
    --evya-transition-fast: 0.12s ease;
    --evya-transition-base: 0.18s ease;
    --evya-transition-slow: 0.32s cubic-bezier(.32, .72, 0, 1);

    /* ── Focus clavier (WCAG 2.4.7) ────────────────────────────────────
       Couleur d'anneau de focus par défaut. Bleu-600 : contraste >= 3:1
       aussi bien sur fond blanc (admin) que sur le bleu nuit du site, et
       l'outline-offset place l'anneau sur le FOND DE PAGE, jamais sur les
       boutons dorés (dont le contraste propre serait insuffisant). Une
       surface peut la surcharger localement si besoin. */
    --evya-focus-ring: #2563eb;
}

/* ──────────────────────────────────────────────────────────────────────
   Utility classes : peuvent être ajoutées aux composants existants
   pour bénéficier des tokens sans toucher à leur CSS local.
   ────────────────────────────────────────────────────────────────────── */

/* Bouton accessible : à appliquer sur n'importe quel CTA pour garantir 48px+. */
.evya-touch       { min-height: var(--evya-touch-min); }
.evya-touch-cta   { min-height: var(--evya-touch-cta); }
.evya-touch-critical { min-height: var(--evya-touch-critical); font-size: var(--evya-text-lg); }

/* Texte muted accessible (remplace les rgba(.5) trop pâles). */
.evya-muted       { color: var(--evya-muted); }
.evya-muted-soft  { color: var(--evya-muted-soft); }

/* Focus visible accessible (clavier) : applicable sur n'importe quel bouton. */
.evya-focusable:focus-visible,
button.evya-focusable:focus-visible,
a.evya-focusable:focus-visible {
    outline: 3px solid var(--evya-info);
    outline-offset: 2px;
    border-radius: var(--evya-radius-sm);
}

/* ──────────────────────────────────────────────────────────────────────
   Focus clavier GLOBAL (WCAG 2.4.7 Focus Visible).
   Avant : liens et boutons n'avaient AUCUN indicateur défini et retombaient
   sur l'anneau par défaut du navigateur, souvent invisible sur les fonds
   sombres/dorés du site. On pose un anneau net et cohérent sur tous les
   éléments réellement interactifs, uniquement au clavier (:focus-visible) —
   la souris ne le déclenche pas.
   Ciblage au niveau élément (spécificité suffisante) pour ne pas être annulé
   par les `outline:none` des champs, qui conservent par ailleurs leur
   box-shadow de focus. On ne touche pas au border-radius pour ne pas
   déformer les composants au focus. ────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="menuitemcheckbox"]:focus-visible,
[role="menuitemradio"]:focus-visible,
[role="option"]:focus-visible,
[role="switch"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible {
    outline: 3px solid var(--evya-focus-ring);
    outline-offset: 2px;
}

/* Lien d'évitement (WCAG 2.4.1 Bypass Blocks) : invisible tant qu'il n'a pas
   le focus clavier, puis glisse en haut à gauche. À poser en tout premier
   enfant de <body>, pointant vers l'ancre du contenu principal (#main-content).
   z-index au-dessus des barres fixes du site (site-nav = 1000). */
.evya-skip-link {
    position: absolute;
    left: 8px;
    top: -80px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--ev-primary-600, #1C1C3A);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.15s ease;
}
.evya-skip-link:focus {
    top: 0;
    outline: 3px solid var(--evya-focus-ring);
    outline-offset: 2px;
}

/* Région visually-hidden pour lecteurs d'écran (pas de display:none qui exclut). */
.evya-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Respect du prefers-reduced-motion : tous les composants animés héritent. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   EVYA DESIGN SYSTEM v2 — couche canonique (verrouillée 2026-08-06)
   Seeds : bleu nuit #081A45 · crème #F7F4EC · or #C9A353 (accent RARE).
   ADDITIF — n'écrase AUCUN token hérité au-dessus (--ev-primary-*, --evya-*,
   --cs-*, --ds-* restent valables). Les composants migrent vers ces rôles v2
   `--evya-*` surface par surface, dans leur session dédiée.
   Clair par défaut + vrai mode sombre (fond nuit chaud, jamais noir pur).
   Spécification complète : docs/design-system/README.md
   Maquette validée : artifact EVYA — Design System v2.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Rampes tonales (référence ; préférer les rôles ci-dessous) ──────── */
    --ev-navy-50:#EDF0F9;  --ev-navy-100:#DCE2F1; --ev-navy-200:#C9D2E8;
    --ev-navy-300:#9AA8CE; --ev-navy-400:#6B7DAE; --ev-navy-500:#33487F;
    --ev-navy-600:#24386F; --ev-navy-700:#12224F; --ev-navy-800:#0C1E4C;
    --ev-navy-900:#081A45;
    --ev-gold-50:#FBF6EA;  --ev-gold-100:#F3E7CB; --ev-gold-200:#E7D2A3;
    --ev-gold-300:#D8B978; --ev-gold-400:#C9A353; --ev-gold-500:#B4863A;
    --ev-gold-600:#8A6E2E; --ev-gold-700:#6E5620; --ev-gold-900:#4A3712;
    --ev-neutral-0:#FFFFFF;  --ev-neutral-50:#F5F2EA;  --ev-neutral-100:#EEEADF;
    --ev-neutral-200:#DED8C9; --ev-neutral-300:#C6BFAC; --ev-neutral-500:#71768A;
    --ev-neutral-700:#4C5165; --ev-neutral-900:#12172B;

    /* ── Rôles sémantiques (API v2 — CIBLER CEUX-CI) · thème CLAIR ───────── */
    --evya-bg:#F5F2EA;            /* fond vitrine / apps (crème) */
    --evya-bg-clean:#FBFAF6;      /* fond admin (blanc cassé, écrans denses) */
    --evya-surface:#FFFFFF;
    --evya-surface-2:#FCFAF4;
    --evya-surface-variant:#EEEADF;
    --evya-on-surface:#12172B;
    --evya-on-surface-med:#4C5165;
    --evya-on-surface-muted:#71768A;
    --evya-outline:#DED8C9;
    --evya-outline-strong:#C6BFAC;
    --evya-primary:#081A45;
    --evya-on-primary:#FFFFFF;
    --evya-primary-hover:#122352;
    --evya-primary-container:#DCE2F1;
    --evya-on-primary-container:#0A1330;
    --evya-accent:#B4863A;        /* or lisible sur crème (texte / bordure) */
    --evya-accent-bright:#C9A353; /* or plein (fond CTA premium uniquement) */
    --evya-on-accent:#2A2003;     /* encre foncée sur l'or (contraste AA ~7:1 ; PAS de blanc) */
    --evya-accent-container:#F3E7CB;
    --evya-on-accent-container:#4A3712;

    /* ── Élévation v2 (ombres teintées navy, discrètes) ─────────────────── */
    --evya-e1:0 1px 2px rgba(8,26,69,.05), 0 1px 3px rgba(8,26,69,.04);
    --evya-e2:0 2px 6px rgba(8,26,69,.07), 0 1px 2px rgba(8,26,69,.05);
    --evya-e3:0 8px 20px rgba(8,26,69,.10), 0 2px 6px rgba(8,26,69,.06);
    --evya-e4:0 18px 40px rgba(8,26,69,.14), 0 4px 10px rgba(8,26,69,.07);

    /* ── Mouvement (Material motion — discret) ──────────────────────────── */
    --evya-dur-fast:120ms; --evya-dur-base:200ms; --evya-dur-slow:320ms;
    --evya-ease-standard:cubic-bezier(.2,0,0,1);
    --evya-ease-emphasized:cubic-bezier(.3,0,0,1);
    --evya-ease-decelerate:cubic-bezier(0,0,0,1);

    /* ── Familles typographiques (auto-hébergées, RGPD) ─────────────────── */
    --evya-font-ui:"EvyaInter","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --evya-font-display:"EvyaCormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
}

/* ── Rôles v2 · thème SOMBRE (auto selon l'OS, sauf surface forcée claire) ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --evya-bg:#0A0F20; --evya-bg-clean:#0A0F20;
        --evya-surface:#0E1428; --evya-surface-2:#141B33; --evya-surface-variant:#1A2340;
        --evya-on-surface:#E9EBF2; --evya-on-surface-med:#B4BACB; --evya-on-surface-muted:#8A90A4;
        --evya-outline:rgba(233,235,242,.14); --evya-outline-strong:rgba(233,235,242,.26);
        --evya-primary:#AEBBE4; --evya-on-primary:#0A1330; --evya-primary-hover:#C3CDEC;
        --evya-primary-container:#24386F; --evya-on-primary-container:#DCE2F1;
        --evya-accent:#E7D2A3; --evya-accent-bright:#E7D2A3; --evya-on-accent:#2A2003;
        --evya-accent-container:#4A3712; --evya-on-accent-container:#F3E7CB;
        --evya-success:#4ADE80; --evya-success-bg:#12331E; --evya-success-border:#1E5631;
        --evya-danger:#F87171;  --evya-danger-bg:#3A1616;  --evya-danger-border:#7F2A2A;
        --evya-warning:#FBBF24; --evya-warning-bg:#3A2A08; --evya-warning-border:#7A5A12;
        --evya-info:#60A5FA;    --evya-info-bg:#0C2740;    --evya-info-border:#1E4E7A;
        --evya-e1:0 1px 2px rgba(0,0,0,.4);  --evya-e2:0 2px 8px rgba(0,0,0,.45);
        --evya-e3:0 10px 24px rgba(0,0,0,.5); --evya-e4:0 20px 44px rgba(0,0,0,.55);
        --evya-focus-ring:#7AA0FF;
    }
}
/* Mode sombre EXPLICITE (surface qui pose data-theme="dark", ex. apps) — gagne toujours */
:root[data-theme="dark"] {
    --evya-bg:#0A0F20; --evya-bg-clean:#0A0F20;
    --evya-surface:#0E1428; --evya-surface-2:#141B33; --evya-surface-variant:#1A2340;
    --evya-on-surface:#E9EBF2; --evya-on-surface-med:#B4BACB; --evya-on-surface-muted:#8A90A4;
    --evya-outline:rgba(233,235,242,.14); --evya-outline-strong:rgba(233,235,242,.26);
    --evya-primary:#AEBBE4; --evya-on-primary:#0A1330; --evya-primary-hover:#C3CDEC;
    --evya-primary-container:#24386F; --evya-on-primary-container:#DCE2F1;
    --evya-accent:#E7D2A3; --evya-accent-bright:#E7D2A3; --evya-on-accent:#2A2003;
    --evya-accent-container:#4A3712; --evya-on-accent-container:#F3E7CB;
    --evya-success:#4ADE80; --evya-success-bg:#12331E; --evya-success-border:#1E5631;
    --evya-danger:#F87171;  --evya-danger-bg:#3A1616;  --evya-danger-border:#7F2A2A;
    --evya-warning:#FBBF24; --evya-warning-bg:#3A2A08; --evya-warning-border:#7A5A12;
    --evya-info:#60A5FA;    --evya-info-bg:#0C2740;    --evya-info-border:#1E4E7A;
    --evya-e1:0 1px 2px rgba(0,0,0,.4);  --evya-e2:0 2px 8px rgba(0,0,0,.45);
    --evya-e3:0 10px 24px rgba(0,0,0,.5); --evya-e4:0 20px 44px rgba(0,0,0,.55);
    --evya-focus-ring:#7AA0FF;
}