/* ════════════════════════════════════════════════════════════════════
   evalab : Design tokens v2
   ════════════════════════════════════════════════════════════════════

   Importé par les layouts de l'espace connecté (user/layout/app,
   app-v2, provider-app, ui-app) ET par la vitrine publique
   (standard/layout/app). C'est la seule source de vérité des couleurs,
   des typos et des rayons : ne jamais recopier une valeur en dur dans
   une vue, sinon le mode sombre et les évolutions de marque ne la
   suivront pas.

   ── Deux familles de noms, volontairement ──────────────────────────
   Les tokens *sémantiques* (--ev-surface, --ev-text, --ev-divider)
   décrivent un rôle, pas une couleur : ce sont eux qu'on écrit dans
   les vues, parce qu'ils sont les seuls à basculer en mode sombre.
   Les tokens *de marque* (--ev-blue, --ev-accent) nomment une teinte
   fixe et servent aux aplats identitaires.

   Les anciens noms de la v1 (--ev-bg-card, --ev-bg-sec, --ev-blue-light,
   --ev-text-subtle, --ev-border-mid, --ev-shadow-*) sont conservés plus
   bas en alias : une quarantaine de vues de l'espace connecté les
   utilisent encore et doivent continuer de fonctionner à l'identique.

   ── Contrastes mesurés (ratio WCAG sur fond blanc) ─────────────────
   --ev-accent        #d97742   3,15:1  → aplats et grand titre SEULEMENT
   --ev-accent-deep   #8a4520   7,11:1  → texte, eyebrows, liens  (AAA)
   --ev-blue          #1b74d9   4,62:1  → texte et boutons        (AA)
   --ev-blue-dark     #1557b0   6,95:1  → texte sur fond clair    (AAA)
   --ev-text-muted    #5a6672   5,87:1  → texte secondaire        (AA+)
   Blanc sur --ev-accent ne donne que 3,15:1 : un bouton terracotta
   porte donc du texte encre (--ev-ink, 5,76:1), jamais du blanc.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marque : teintes fixes ──────────────────────────────────── */
  --ev-blue:            #1b74d9;
  --ev-blue-dark:       #1557b0;
  --ev-blue-darker:     #0f3f80;
  --ev-blue-hover:      #1966c2;

  /* Terracotta : le second ton de la marque. Il ne remplace jamais le
     bleu, il l'accompagne, eyebrows, pastilles de numéro, aplats de
     remplissage des icônes, bouton secondaire. */
  --ev-accent:          #d97742;
  /* Couleur du TEXTE posé sur un aplat de marque.
     Elle ne peut pas être figée à blanc : en thème sombre, --ev-blue
     s'éclaircit (#5ba4f5) et du blanc par-dessus ne donne plus que
     2,4:1, un bouton plein illisible. Le token suit donc le thème.
     Ici : blanc sur #1b74d9, soit 4,62:1.
     Sur le terracotta, c'est l'encre et non le blanc : blanc sur
     #d97742 ne donne que 3,15:1, l'encre remonte à 5,76:1. */
  --ev-on-blue:         #ffffff;
  --ev-on-accent:       var(--ev-ink);
  --ev-accent-deep:     #8a4520;
  --ev-accent-hover:    #c96830;

  /* Encre : remplissage sombre volontairement fixe (bandeau CTA, pied
     de page, bouton « dark », texte posé sur le terracotta). Contrairement
     à --ev-text, il ne s'inverse pas en mode sombre : sinon ces fonds
     deviendraient blancs. */
  --ev-ink:             #0a1722;

  /* ── Sémantiques : basculent en mode sombre ──────────────────── */
  --ev-bg:              #f7f9fb;
  --ev-surface:         #ffffff;
  --ev-surface-2:       #fbfcfd;
  --ev-surface-offset:  #eef2f6;
  /* Barre de navigation posée SUR du contenu qui défile : opaque
     à 96 % pour que le flou de l'arrière-plan reste perceptible.
     Une valeur littérale est nécessaire : une couleur pleine ne
     peut pas servir de base à une transparence. */
  --ev-surface-translucent: rgba(255, 255, 255, .96);
  --ev-divider:         #e6ebf0;
  --ev-border:          #d8e0e8;

  --ev-text:            #0c0f0d;
  --ev-text-muted:      #5a6672;
  --ev-text-faint:      #94a1ad;
  --ev-text-inverse:    #ffffff;

  /* Aplats de teinte : fonds de pastille, de badge, d'icône. */
  --ev-blue-soft:       #f0f6fd;
  --ev-blue-highlight:  #e2eefb;
  --ev-blue-soft-border: #c3dcf6;
  --ev-accent-soft:     #fdf4ef;
  --ev-accent-highlight:#fae3d5;

  /* ── États ───────────────────────────────────────────────────── */
  --ev-success:           #0f9d63;
  --ev-success-highlight: #dcf3e9;
  --ev-warning:           #c2760a;
  --ev-warning-highlight: #fbeed6;
  --ev-error:             #d13b3b;
  --ev-error-highlight:   #fbe2e2;
  /* Bordure et texte des messages. Le texte NE PEUT PAS être --ev-error
     ni --ev-success : posés sur leur propre fond teinté, ceux-ci
     tombent à 3,6:1 et 2,9:1. Ces deux teintes-ci dépassent 5:1. */
  --ev-error-border:      #f2bcbc;
  --ev-error-text:        #a32323;
  --ev-success-border:    #a9dfc7;
  --ev-success-text:      #0a6b44;
  --ev-warning-border:    #f0d9a8;
  --ev-warning-text:      #8a5300;
  --ev-info:              #2f6fd0;
  --ev-info-highlight:    #e3ecfb;

  /* ── Rayons ──────────────────────────────────────────────────── */
  --ev-radius-sm:   8px;
  --ev-radius-md:   14px;
  --ev-radius-lg:   20px;
  --ev-radius-xl:   28px;
  --ev-radius-2xl:  40px;

  /* ── Ombres ──────────────────────────────────────────────────── */
  --ev-shadow-card: 0 1px 2px rgba(10, 23, 34, .04), 0 8px 24px rgba(10, 23, 34, .06);
  --ev-shadow-lift: 0 10px 30px rgba(10, 23, 34, .10);
  --ev-shadow-deep: 0 20px 45px rgba(10, 23, 34, .14);

  /* ── Typographie ─────────────────────────────────────────────── */
  /* Space Grotesk porte les titres (géométrique, chasse serrée), Manrope
     le texte courant. Les deux sont chargés par les layouts ; les piles
     de repli couvrent le temps de chargement et l'échec réseau. */
  --ev-ff-head: 'Space Grotesk', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --ev-ff-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ev-ff-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Courbe d'animation commune ──────────────────────────────── */
  /* Une seule courbe pour tout le site : les entrées au scroll, les
     soulèvements de carte et les zooms d'image doivent se ressembler. */
  --ev-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ════════════════════════════════════════════════════════════════════
   Mode sombre
   ════════════════════════════════════════════════════════════════════
   Redéclarer les mêmes variables suffit : toute vue écrite avec les
   tokens sémantiques bascule sans une seule règle en plus.

   Deux portes d'entrée, et JAMAIS `prefers-color-scheme` seul :
   l'espace connecté est écrit en dur pour le thème clair (fonds #fff
   codés en dur dans une quarantaine de vues), il deviendrait illisible
   si la préférence système s'y appliquait toute seule.

     [data-ev-theme="dark"]  choix explicite, posé par ev-motion.js
     [data-ev-theme-auto]    suivre le système : posé par le seul
                             layout de la vitrine publique

   Les teintes de marque sont réhaussées : #1b74d9 et #d97742 tombent
   respectivement à 2,1:1 et 2,4:1 sur un fond sombre, sous le seuil
   lisible. Leurs versions claires remontent à 6,5:1 et 7,5:1.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) {
    --ev-blue:            #5ba4f5;
    --ev-blue-dark:       #8cc0f8;
    --ev-blue-darker:     #b3d6fb;
    --ev-blue-hover:      #7ab5f7;

    --ev-accent:          #f0966a;
    /* Sur le bleu clair du thème sombre, c'est l'encre qui passe :
       #0a1722 sur #5ba4f5 donne ≈7,3:1. */
    --ev-on-blue:         var(--ev-ink);
    --ev-on-accent:       var(--ev-ink);
    --ev-accent-deep:     #f5b795;
    --ev-accent-hover:    #f4a880;

    --ev-bg:              #0e1418;
    --ev-surface:         #161d23;
    --ev-surface-2:       #1b242b;
    --ev-surface-offset:  #212c34;
    --ev-surface-translucent: rgba(22, 29, 35, .96);
    --ev-divider:         #253039;
    --ev-border:          #2f3d47;

    --ev-text:            #eef2f5;
    --ev-text-muted:      #9aa8b2;
    --ev-text-faint:      #6b7a85;

    --ev-blue-soft:       #15202b;
    --ev-blue-highlight:  #1b2d3d;
    --ev-blue-soft-border: #27425c;
    --ev-accent-soft:     #241a15;
    --ev-accent-highlight:#33241c;

    --ev-success:           #34c98f;
    --ev-success-highlight: #123528;
    --ev-warning:           #eaa64a;
    --ev-warning-highlight: #3a2a12;
    --ev-error:             #ef6b6b;
    --ev-error-highlight:   #3d1e1e;
    /* En sombre, les teintes de base passent l'épreuve sur leur propre
       fond (≈4,8:1 et ≈6,3:1) : inutile de les assombrir. */
    --ev-error-border:      #5c2c2c;
    --ev-error-text:        var(--ev-error);
    --ev-success-border:    #1d4d3a;
    --ev-success-text:      var(--ev-success);
    --ev-warning-border:    #55401a;
    --ev-warning-text:      var(--ev-warning);
    --ev-info:              #6f9af0;
    --ev-info-highlight:    #1b2740;

    --ev-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --ev-shadow-lift: 0 10px 30px rgba(0, 0, 0, .4);
    --ev-shadow-deep: 0 20px 45px rgba(0, 0, 0, .5);
  }
}

:root[data-ev-theme="dark"] {
  --ev-blue:            #5ba4f5;
  --ev-blue-dark:       #8cc0f8;
  --ev-blue-darker:     #b3d6fb;
  --ev-blue-hover:      #7ab5f7;

  --ev-accent:          #f0966a;
  /* Sur le bleu clair du thème sombre, c'est l'encre qui passe :
     #0a1722 sur #5ba4f5 donne ≈7,3:1. */
  --ev-on-blue:         var(--ev-ink);
  --ev-on-accent:       var(--ev-ink);
  --ev-accent-deep:     #f5b795;
  --ev-accent-hover:    #f4a880;

  --ev-bg:              #0e1418;
  --ev-surface:         #161d23;
  --ev-surface-2:       #1b242b;
  --ev-surface-offset:  #212c34;
  --ev-surface-translucent: rgba(22, 29, 35, .96);
  --ev-divider:         #253039;
  --ev-border:          #2f3d47;

  --ev-text:            #eef2f5;
  --ev-text-muted:      #9aa8b2;
  --ev-text-faint:      #6b7a85;

  --ev-blue-soft:       #15202b;
  --ev-blue-highlight:  #1b2d3d;
  --ev-blue-soft-border: #27425c;
  --ev-accent-soft:     #241a15;
  --ev-accent-highlight:#33241c;

  --ev-success:           #34c98f;
  --ev-success-highlight: #123528;
  --ev-warning:           #eaa64a;
  --ev-warning-highlight: #3a2a12;
  --ev-error:             #ef6b6b;
  --ev-error-highlight:   #3d1e1e;
  /* En sombre, les teintes de base passent l'épreuve sur leur propre
     fond (≈4,8:1 et ≈6,3:1) : inutile de les assombrir. */
  --ev-error-border:      #5c2c2c;
  --ev-error-text:        var(--ev-error);
  --ev-success-border:    #1d4d3a;
  --ev-success-text:      var(--ev-success);
  --ev-warning-border:    #55401a;
  --ev-warning-text:      var(--ev-warning);
  --ev-info:              #6f9af0;
  --ev-info-highlight:    #1b2740;

  --ev-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --ev-shadow-lift: 0 10px 30px rgba(0, 0, 0, .4);
  --ev-shadow-deep: 0 20px 45px rgba(0, 0, 0, .5);
}

/* Indique au navigateur de teinter ses propres surfaces (barres de
   défilement, champs de formulaire natifs) dans le bon thème. */
:root[data-ev-theme="dark"] { color-scheme: dark; }
:root[data-ev-theme="light"] { color-scheme: light; }
:root[data-ev-theme-auto]:not([data-ev-theme]) { color-scheme: light dark; }

/* ════════════════════════════════════════════════════════════════════
   Alias de compatibilité : v1
   ════════════════════════════════════════════════════════════════════
   Ces noms sont ceux de la v1, encore employés par les vues de l'espace
   connecté. Ils pointent désormais sur les tokens sémantiques, donc ils
   suivent le mode sombre sans qu'aucune de ces vues n'ait été modifiée.
   À retirer seulement quand un `grep` sur chacun ne renverra plus rien.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --ev-bg-card:      var(--ev-surface);
  --ev-bg-sec:       var(--ev-surface-offset);
  --ev-blue-light:   var(--ev-blue-highlight);
  --ev-text-subtle:  var(--ev-text-faint);
  --ev-border-mid:   var(--ev-border);
  --ev-shadow-sm:    var(--ev-shadow-card);
  --ev-shadow-md:    var(--ev-shadow-lift);

  /* --ev-ff-base n'a jamais été défini, ni en v1 ni ailleurs : les quatre
     vues qui l'emploient (general-project/show-public, certification-apply,
     contract-sign ×2) déclarent donc `font-family:` sur une variable vide,
     que le navigateur laisse retomber sur la police héritée. On le définit
     ici pour que leur intention : la police de texte courant, soit
     réellement appliquée. */
  --ev-ff-base:      var(--ev-ff-body);
}