/*
 * Jetons du core, couche « core » (M06-T03, ADR-0017, 50-interface.md § 7.1).
 *
 * Valeurs transcrites de la direction retenue A « Verre » (docs/design/direction-visuelle.md
 * § 3 et maquettes/cockpit/direction-a/styles.css) ; aucune valeur choisie ici.
 * Ce fichier porte ce qui ne change pas avec le thème : police, échelle de texte,
 * espacement, rayons, dimensions, matière et mouvement. Les couleurs sont dans
 * themes/clair.css et themes/sombre.css ; les replis dans themes/contraste.css.
 *
 * Couches : tout vit dans la couche « jetons », avant celles de Tailwind. La feuille
 * de marque du client (GET /api/v1/interface/theme.css) est hors couche : elle
 * l'emporte toujours, quel que soit l'ordre de chargement.
 *   jetons.base   : ce fichier ;
 *   jetons.theme  : clair, sombre ;
 *   jetons.repli  : contraste renforcé, transparence réduite, absence de flou.
 *
 * Seuls tokens.css et themes/ peuvent contenir une couleur, une taille en px ou
 * une police littérale (outils/ci/lint_valeurs_design.mjs).
 */

@layer jetons.base, jetons.theme, jetons.repli;

/* Polices de l'image (liste fermée, la même que bb_core.interface.theme.POLICES). */
@font-face {
  font-family: "Inter Variable";
  src: url("./fonts/inter/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Variable";
  src: url("./fonts/geist/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer jetons.base {
  :root {
    /* Typographie : une famille, embarquée ; la marque peut en choisir une autre de l'image. */
    --police: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
    --police-reglages: "cv11", "ss03";

    /* Échelle fixe en rem autour d'un corps de 14 px. */
    --texte-xs: 0.75rem; /* 12 px : mentions, fraîcheur */
    --texte-sm: 0.8125rem; /* 13 px : libellés, tableaux */
    --texte-base: 0.875rem; /* 14 px : corps */
    --texte-md: 1rem; /* 16 px : titres de bloc */
    --texte-lg: 1.375rem; /* 22 px : valeurs des tuiles */
    --texte-xl: 1.75rem; /* 28 px : titre de page */
    --texte-2xl: 2.5rem; /* 40 px : valeur phare */
    --texte-2xl-telephone: 2.25rem; /* 36 px : valeur phare au téléphone */

    --interligne-serre: 1.1;
    --interligne-titre: 1.25;
    --interligne-corps: 1.5;

    /* Approche : négative sur les grands titres, nulle sur le corps, positive sur les mentions. */
    --approche-phare: -0.03em;
    --approche-titre: -0.022em;
    --approche-valeur: -0.018em;
    --approche-corps: 0em;
    --approche-mention: 0.012em;

    /* Graisses un cran au-dessus de l'usage sur fond plein : le texte garde sa présence sur le verre. */
    --graisse-corps: 440;
    --graisse-libelle: 540;
    --graisse-valeur: 620;
    --graisse-titre: 640;
    --graisse-phare: 660;

    /* Lignes de texte courant : 65 à 75 caractères (50-interface.md § 7.2). */
    --mesure-texte: 65ch;

    /* Espacement : échelle de 4 px. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Rayons concentriques : plaque 22, commande 12, pastille 8 ; capsule de la barre basse 26. */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 22px;
    --radius-capsule: 26px;

    /* Densité moyenne. */
    --hauteur-ligne: 2.5rem; /* 40 px : une ligne de tableau respire (lot 2 du design) */
    --hauteur-champ: 2.5rem; /* 40 px : champ de saisie, 44 px au toucher */
    --hauteur-commande: 2.25rem; /* 36 px */
    --cible-tactile: 2.75rem; /* 44 px au moins au toucher */
    --cible-barre-basse: 3.25rem; /* 52 px */
    --largeur-nav: 14.5rem; /* 232 px */
    --largeur-agent: 21rem; /* 336 px */
    --marge-coque: 0.75rem; /* les plaques flottent à 12 px des bords */
    /* Respiration de la coque (lot 1 du design) : la navigation et la colonne s'écartent
     * de 16 px, puis le contenu se retire de la barre du haut (12 à 24 px selon la largeur) :
     * 28 à 40 px entre la plaque de navigation et le premier caractère. */
    --gouttiere-coque: 1rem;
    --gouttiere-contenu: clamp(0.75rem, 1.4vw, 1.5rem);
    --gouttiere-telephone: 1rem; /* bord d'écran au téléphone */

    /* Barre native : 10 px de prise, poignée peinte de 6 px, sans variation au survol. */
    --defilement-largeur: 10px;
    --defilement-marge: 2px;

    /* Code QR (M06-T11) : sombre sur clair dans les deux thèmes, sinon des lecteurs ne le lisent pas. */
    --qr-fond: oklch(0.99 0.004 275);
    --qr-module: oklch(0.2 0.025 275);

    /* Fond exact de la maquette A : cinq positions, trois teintes immobiles. */
    --fond-vivant:
      radial-gradient(46% 40% at 6% 2%, var(--fond-1), transparent 74%),
      radial-gradient(44% 46% at 94% 8%, var(--fond-2), transparent 72%),
      radial-gradient(54% 42% at 62% 102%, var(--fond-3), transparent 74%),
      radial-gradient(38% 34% at 34% 52%, var(--fond-2), transparent 76%),
      radial-gradient(34% 30% at 78% 58%, var(--fond-1), transparent 76%);

    /* Matière : trois épaisseurs de verre, du plus fin au plus épais. */
    --verre-flou-fin: 18px; /* barres flottantes */
    --verre-flou: 28px; /* tuiles et blocs */
    --verre-flou-epais: 40px; /* navigation, panneau de l'agent */
    --verre-saturation: 1.7;

    /* Mouvement : 150 à 250 ms, sortie exponentielle, ressort sans rebond. */
    --duree-appui: 60ms;
    --duree-rapide: 150ms;
    --duree-base: 200ms;
    --duree-lente: 250ms;
    --echelle-appui: 0.97;
    --echelle-materialisation: 0.98; /* une plaque de verre apparaît : échelle, flou et opacité ensemble */
    --duree-pulsation: 1100ms; /* squelettes : pulsation d'opacité à 0,45 Hz, loin des 0,2 Hz à éviter */
    --courbe-sortie: cubic-bezier(0.23, 1, 0.32, 1);
    --courbe-entree-sortie: cubic-bezier(0.65, 0, 0.35, 1);
    /* Ressort critique (amortissement 1,0, réponse 0,35 s) en linear(), panneaux et feuilles. */
    --ressort-panneau: linear(0, 0.115 6.2%, 0.321 12.5%, 0.517 18.8%, 0.672 25%, 0.784 31.2%, 0.861 37.5%, 0.912 43.8%, 0.945 50%, 0.966 56.2%, 0.979 62.5%, 0.987 68.8%, 0.992 75%, 0.995 81.2%, 0.997 87.5%, 0.998 93.8%, 1);
    --ressort-panneau-duree: 515ms; /* 99,9 % atteint ; perçu terminé vers 300 ms */

    /* Graphiques (canvas d'ECharts) : lus par une sonde sur l'élément, convertis en px. */
    --graphique-trait: 2px;
    --graphique-point: 0.5rem; /* 8 px */
    --graphique-barre-max: 1.75rem; /* 28 px */
    --graphique-barre-rayon: 0.25rem; /* 4 px */
  }

  /* Mouvement réduit : plus de ressort ni d'échelle ; des fondus courts à la place. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --echelle-appui: 1;
      --echelle-materialisation: 1;
      --ressort-panneau: var(--courbe-sortie);
      --ressort-panneau-duree: var(--duree-rapide);
    }
  }
}