/* jetons.css : les jetons des lois de la Stoa, un seul fichier (plan 007, T1, arbitrage 4 du 25/09).
   La marque (--fond --surface --encre --encre-2 --encre-3 --accent --accent-encre --accent-2 --ok
   --attention --danger --info --rayon --police --police-donnee) vient de /apparence.css, chargee avant
   ce fichier : rien ici ne la redeclare. Ce qui derive de la marque (traits, matieres, fonds doux, rayons
   r-1 a r-4, halo, degrade du logo) reste calcule : les reglages Rayons et Couleur de marque font tout
   bouger. Un jeton qui ne change pas avec le theme n'apparait que dans :root ; les deux blocs sombres
   (media sombre, puis [data-theme="dark"] force par l'interrupteur) declarent les memes noms aux memes
   valeurs. Point de rupture unique : 900px, ecrit dans chaque @media (une variable CSS ne vaut pas dans
   une condition de media). Les annotations "pour: .selecteur{propriete}" sont lues par
   harnais/copie-css.cjs : un jeton annote est un role (substitue a la valeur entiere de cette propriete
   pour ce selecteur de la maquette) ; un jeton non annote a valeur litterale est un atome de sa famille
   (--t-* taille, --g-* graisse, --z-* plan, --r-* rayon, --teinte-* / --agent-encre / --voile couleur,
   --l-* / --h-* mesures, --marge-* padding, --filet* box-shadow). Fichier ASCII. */
:root {
  /* derives de la marque (calcules : ils suivent le gabarit, le nuancier et le theme) */
  --trait: color-mix(in srgb, var(--encre) 9%, transparent); /* Ecart a la maquette : T1 --trait, derive de la marque (avec --trait-fort) au lieu des rgba figes s13-s14, pour qu'un gabarit client s'y applique */
  --trait-fort: color-mix(in srgb, var(--encre) 16%, transparent);
  --matiere: color-mix(in srgb, var(--surface) 72%, transparent);
  --matiere-forte: color-mix(in srgb, var(--fond) 82%, transparent); /* Ecart a la maquette : T1 --matiere-forte, derive de la marque au lieu du rgba fige s9, pour qu'un gabarit client s'y applique */
  --accent-doux: color-mix(in srgb, var(--accent) 14%, transparent); /* Ecart a la maquette : T1 --accent-doux, formule de c10 au lieu des valeurs figees s17 et s47 (ce que la maquette rend), pour suivre l'accent du gabarit */
  --ok-doux: color-mix(in srgb, var(--ok) 12%, transparent);
  --attention-doux: color-mix(in srgb, var(--attention) 12%, transparent);
  --danger-doux: color-mix(in srgb, var(--danger) 10%, transparent);
  --info-doux: color-mix(in srgb, var(--info) 10%, transparent);
  --halo: radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
          radial-gradient(900px 500px at 95% 0%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 55%);
  --degrade-marque: linear-gradient(135deg, var(--accent), var(--accent-2)); /* pour: .marque i{background} */ /* Ecart a la maquette : T1 --degrade-marque, le logo suit --accent-2 du gabarit (sa valeur sombre) la ou c21 fige la teinte violet en dur, pour suivre la marque */

  /* forme : r-1 a r-4 suivent le reglage Rayons ; les autres sont fixes, comme dans la maquette */
  --r-1: calc(var(--rayon) * 0.67);
  --r-2: calc(var(--rayon) * 1);
  --r-3: calc(var(--rayon) * 1.5);
  --r-4: calc(var(--rayon) * 2.17);
  --r-pilule: 999px;
  --r-rond: 50%;
  --r-vignette: 8px;
  --r-touche: 6px;
  --r-barrette: 3px;
  --r-trait: 2px;
  --r-bulle: 20px 20px 6px 20px;
  --r-bulle-appoint: 16px 16px 4px 16px;

  /* ombres, filets, voile (lois : du noir transparent, jamais la marque) */
  --ombre-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --ombre-2: 0 12px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --ombre-3: 0 24px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  --filet: inset 0 0 0 1px var(--trait);
  --filet-fort: inset 0 0 0 1px var(--trait-fort);
  --filet-accent: inset 0 0 0 2px var(--accent);
  --voile: rgba(0, 0, 0, .32);

  /* couleurs d'agent et de categorie : fixes, identiques dans les deux themes et pour toute marque
     (l'identite d'un agent ne change pas avec le theme ni avec le gabarit d'un client) */
  --teinte-bleu: #0071e3;
  --teinte-bleu-vif: #0a84ff;
  --teinte-violet: #af52de;
  --teinte-vert: #34c759;
  --teinte-orange: #ff9f0a;
  --teinte-rose: #ff375f;
  --teinte-indigo: #5e5ce6;
  --teinte-ciel: #64d2ff;
  --teinte-sarcelle: #30b0c7;
  --agent-encre: #ffffff;
  --compteur-encre: #ffffff; /* pour: .compteur{color}, :root:not([data-theme="light"]) .compteur{color}, :root[data-theme="dark"] .compteur{color} */
  --agent-mnemo: linear-gradient(135deg, var(--teinte-bleu), var(--teinte-violet)); /* pour: .avatar.mnemo{background} */
  --agent-ouvrier: linear-gradient(135deg, var(--teinte-vert), var(--teinte-bleu-vif)); /* pour: .avatar.ouvrier{background} */
  --agent-relecteur: linear-gradient(135deg, var(--teinte-orange), var(--teinte-rose)); /* pour: .avatar.relecteur{background} */
  --agent-courrier: linear-gradient(135deg, var(--teinte-indigo), var(--teinte-ciel)); /* pour: .avatar.courrier{background} */
  --agent-intendant: linear-gradient(135deg, var(--teinte-sarcelle), var(--teinte-vert)); /* pour: .avatar.intendant{background} */
  --agent-plume: linear-gradient(135deg, var(--teinte-rose), var(--teinte-violet)); /* pour: .avatar.plume{background} */
  --categorie-mnemo: var(--accent); /* pour: .v-auteur.mnemo{background} */
  --categorie-agent: var(--teinte-orange); /* pour: .v-auteur.agent{background} */
  --categorie-obsidian: var(--teinte-violet); /* pour: .v-auteur.obsidian{background} */
  --categorie-vps: var(--teinte-sarcelle); /* pour: .v-auteur.vps{background} */

  /* echelle typographique : les valeurs exactes de la maquette, communes aux deux themes */
  --t-titre-poste: 40px;
  --t-titre-poste-tel: 30px;
  --t-chiffre: 22px;
  --t-titre-2: 21px;
  --t-titre-3: 19px;
  --t-titre-4: 17px;
  --t-saisie: 16px;
  --t-corps: 15px;
  --t-ui: 14px;
  --t-aide-plus: 13.5px;
  --t-aide: 13px;
  --t-petit-plus: 12.5px;
  --t-petit: 12px;
  --t-legende-plus: 11.5px;
  --t-legende: 11px;
  --t-minuscule: 10px;
  --t-micro: 9px;

  /* graisses */
  --g-normal: 400;
  --g-moyen: 500;
  --g-demi: 560;
  --g-bouton: 590;
  --g-fort: 600;
  --g-titre: 650;
  --g-gras: 700;

  /* plans */
  --z-flottant: 20;
  --z-onglets-tel: 25;
  --z-menu: 30;
  --z-etabli-tel: 36;
  --z-voile: 40;
  --z-feuille: 41;
  --z-toast: 60;

  /* mesures recurrentes */
  --l-rail: 264px;
  --l-etabli: 440px;
  --l-etabli-seance: 470px;
  --l-etabli-usine: 420px;
  --l-colonne: 720px;
  --l-page: 1180px;
  --l-page-une: 940px;
  --l-page-large: 1240px;
  --l-reglages: 920px;
  --l-feuille: 560px;
  --h-entete: 56px;
  --h-onglets-tel: 58px;
  --marge-page: 36px 28px 150px;
  --marge-page-tel: 22px 14px 140px;
  --marge-reglages: 36px 28px 80px;
}

/* sombre : suit le systeme, sauf si la page force un theme par data-theme (interrupteur clair / sombre) ;
   les deux blocs qui suivent declarent les memes noms aux memes valeurs */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --trait: color-mix(in srgb, var(--encre) 10%, transparent); /* Ecart a la maquette : T1 --trait, derive de la marque (avec --trait-fort) au lieu des rgba figes s43-s44 */
    --trait-fort: color-mix(in srgb, var(--encre) 20%, transparent);
    --matiere-forte: color-mix(in srgb, color-mix(in srgb, var(--surface) 79%, var(--fond)) 84%, transparent); /* Ecart a la maquette : T1 --matiere-forte, derive de la marque au lieu du rgba fige s39 */
    --ok-doux: color-mix(in srgb, var(--ok) 16%, transparent);
    --attention-doux: color-mix(in srgb, var(--attention) 16%, transparent);
    --danger-doux: color-mix(in srgb, var(--danger) 16%, transparent);
    --info-doux: color-mix(in srgb, var(--info) 16%, transparent);
    --halo: radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
            radial-gradient(900px 500px at 95% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%);
    --ombre-1: 0 1px 2px rgba(0,0,0,.5);
    --ombre-2: 0 12px 32px rgba(0,0,0,.55);
    --ombre-3: 0 24px 60px rgba(0,0,0,.7);
    --voile: rgba(0, 0, 0, .32);
    --compteur-encre: #1a0f00;
  }
}
:root[data-theme="dark"] {
  --trait: color-mix(in srgb, var(--encre) 10%, transparent); /* Ecart a la maquette : T1 --trait, derive de la marque (avec --trait-fort) au lieu des rgba figes s43-s44 */
  --trait-fort: color-mix(in srgb, var(--encre) 20%, transparent);
  --matiere-forte: color-mix(in srgb, color-mix(in srgb, var(--surface) 79%, var(--fond)) 84%, transparent); /* Ecart a la maquette : T1 --matiere-forte, derive de la marque au lieu du rgba fige s39 */
  --ok-doux: color-mix(in srgb, var(--ok) 16%, transparent);
  --attention-doux: color-mix(in srgb, var(--attention) 16%, transparent);
  --danger-doux: color-mix(in srgb, var(--danger) 16%, transparent);
  --info-doux: color-mix(in srgb, var(--info) 16%, transparent);
  --halo: radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
          radial-gradient(900px 500px at 95% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%);
  --ombre-1: 0 1px 2px rgba(0,0,0,.5);
  --ombre-2: 0 12px 32px rgba(0,0,0,.55);
  --ombre-3: 0 24px 60px rgba(0,0,0,.7);
  --voile: rgba(0, 0, 0, .32);
  --compteur-encre: #1a0f00;
}