/* Design system de Jalony, v1. Une seule source pour la console, le site et le widget.
 *
 * LA RÈGLE QUI TIENT TOUT : un relevé, pas une vitrine. Jalony mesure ce que vivent des
 * utilisateurs et le rend lisible. Sa peau emprunte donc aux instruments et aux plans
 * (papier, graphite, filets, repères gradués, chiffres en chasse fixe), pas aux pages
 * d'accueil génériques (fond noir bleuté, accent néon, dégradés, halos, ombres partout).
 *
 * Les polices ne sont PAS importées ici : chaque surface les charge elle-même, pour ne pas
 * imposer une requête réseau au widget embarqué chez une cliente.
 *   Archivo (titres, axe wdth) · IBM Plex Sans (texte) · IBM Plex Mono (chiffres)
 */

:root {
  /* Papier et encre : des neutres CHAUDS. Le gris bleuté est la signature du look générique. */
  --jly-papier: #f6f3ec;
  --jly-papier-2: #efe9dd;
  --jly-surface: #fffdf8;
  --jly-trait: #ddd5c5;
  --jly-trait-fort: #c2b7a1;
  /* Le trait qui DELIMITE un composant (champ, bouton, case a cocher) doit tenir 3:1 :
   * c'est le critere RGAA 3.3. Les deux traits ci-dessus sont decoratifs (filets,
   * separateurs) et n'y sont pas soumis. Ne jamais dessiner un controle avec eux. */
  --jly-trait-actif: #8b8478;
  --jly-encre: #1b1a17;
  --jly-encre-douce: #5c574e;
  --jly-encre-pale: #746e64;

  /* Le rouge Bizdi reste la signature de la famille : une MARQUE, posée rarement. */
  --jly-rouge: #d32f2f;
  --jly-rouge-encre: #b3261e;
  --jly-rouge-voile: rgba(211, 47, 47, 0.09);
  --jly-sur-rouge: #ffffff;

  /* L'encre de plan : tout ce qui relève de l'agent et de la mesure. */
  --jly-plan: #2f4858;
  --jly-plan-voile: rgba(47, 72, 88, 0.08);
  --jly-focus: var(--jly-plan);

  --jly-ok: #2f6b4f;
  --jly-ok-voile: rgba(47, 107, 79, 0.1);
  --jly-alerte: #9a5b12;
  --jly-alerte-voile: rgba(154, 91, 18, 0.12);
  --jly-erreur: #a32a1f;
  --jly-erreur-voile: rgba(163, 42, 31, 0.1);
  --jly-avis: #7d3f5e;
  --jly-avis-voile: rgba(125, 63, 94, 0.1);

  /* Formes : le trait avant l'ombre. Un rayon discret, jamais la pilule partout. */
  --jly-rayon: 4px;
  --jly-rayon-2: 8px;
  --jly-filet: 1px;
  --jly-ombre-flottant: 0 2px 4px rgba(27, 26, 23, 0.06), 0 18px 40px rgba(27, 26, 23, 0.16);

  /* Typographie */
  /* Une grotesque de signaletique : dessinee pour etre lue vite et de loin, sur un
   * panneau ou dans un tableau. Elle donne au titre la presence qu'une serif de
   * caractere perdait dans ses delies, sans deguisement science-fiction. */
  --jly-titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --jly-texte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jly-chiffre: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --jly-titre-axes: 'wdth' 100;

  /* Échelle : deux tailles de titre, trois de texte. Plus serait du bruit. */
  --jly-t1: clamp(2.1rem, 4.4vw, 3.4rem);
  --jly-t2: clamp(1.45rem, 2.4vw, 2rem);
  --jly-t3: 1.1rem;
  --jly-corps: 1rem;
  --jly-petit: 0.875rem;
  --jly-mention: 0.75rem;

  /* Rythme : une trame de 4 px, comme un papier millimétré. */
  --jly-pas: 4px;

  /* Motifs de relevé, réutilisables tels quels. */
  --jly-cotes: repeating-linear-gradient(90deg, var(--jly-rouge) 0 18px, transparent 18px 28px);
  --jly-graduation: repeating-linear-gradient(90deg, var(--jly-trait-fort) 0 1px, transparent 1px 8px);
  --jly-millimetre:
    linear-gradient(var(--jly-trait) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, var(--jly-trait) 1px, transparent 1px) 0 0 / 24px 100%;
}

/* Le thème suit le système tant que personne n'a choisi. Jamais de thème imposé. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --jly-papier: #14120f;
    --jly-papier-2: #1b1814;
    --jly-surface: #1e1b16;
    --jly-trait: #322c24;
    --jly-trait-fort: #4a4237;
    --jly-trait-actif: #70685a;
    --jly-encre: #efe9dd;
    --jly-encre-douce: #b0a795;
    --jly-encre-pale: #8a8273;
    --jly-rouge-encre: #f0857b;
    --jly-rouge-voile: rgba(211, 47, 47, 0.18);
    --jly-plan: #8fb6c9;
    --jly-plan-voile: rgba(143, 182, 201, 0.12);
    --jly-ok: #79c2a0;
    --jly-ok-voile: rgba(121, 194, 160, 0.14);
    --jly-alerte: #e0a45e;
    --jly-alerte-voile: rgba(224, 164, 94, 0.14);
    --jly-erreur: #ef8b80;
    --jly-erreur-voile: rgba(239, 139, 128, 0.14);
    --jly-avis: #dda0bd;
    --jly-avis-voile: rgba(221, 160, 189, 0.14);
    --jly-ombre-flottant: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.6);
  }
}

[data-theme='dark'] {
  --jly-papier: #14120f;
  --jly-papier-2: #1b1814;
  --jly-surface: #1e1b16;
  --jly-trait: #322c24;
  --jly-trait-fort: #4a4237;
  --jly-trait-actif: #70685a;
  --jly-encre: #efe9dd;
  --jly-encre-douce: #b0a795;
  --jly-encre-pale: #8a8273;
  --jly-rouge-encre: #f0857b;
  --jly-rouge-voile: rgba(211, 47, 47, 0.18);
  --jly-plan: #8fb6c9;
  --jly-plan-voile: rgba(143, 182, 201, 0.12);
  --jly-ok: #79c2a0;
  --jly-ok-voile: rgba(121, 194, 160, 0.14);
  --jly-alerte: #e0a45e;
  --jly-alerte-voile: rgba(224, 164, 94, 0.14);
  --jly-erreur: #ef8b80;
  --jly-erreur-voile: rgba(239, 139, 128, 0.14);
  --jly-avis: #dda0bd;
  --jly-avis-voile: rgba(221, 160, 189, 0.14);
  --jly-ombre-flottant: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.6);
}