/*
 * La palette, les familles de caractères et les plans, en propriétés personnalisées.
 *
 * Triée juste après _forms.css, et avant toutes les autres feuilles, par le tiret bas : une
 * propriété personnalisée doit être déclarée avant d'être lue (étape 6c de docs/hotwire.md).
 */

/* La palette et les deux familles de caractères, en propriétés personnalisées : le navigateur les */
/* lit lui-même, aucun compilateur ne les résout (étape 6c de docs/hotwire.md). Elles remplacent les */
/* variables Sass `$…` déclarées ici jusque-là ; $primary-color est partie avec elles, plus aucune */
/* feuille ne la lisait. */
/* */
/* Étape 6e : les feuilles écrivaient 585 couleurs en clair pour 20 noms ici. Une couleur prend un */
/* nom quand ce nom dit quelque chose que la valeur ne dit pas — `--color-purple` dit « Business », */
/* `--color-destroy` dit « ce lien supprime ». Les 33 gris que les feuilles emploient encore en */
/* clair n'ont pas ce nom-là : ils ne font que 9 familles perceptibles (six d'entre eux tiennent en */
/* vingt points), et les numéroter ferait passer un accident pour une échelle décidée. Réduire cette */
/* série change le rendu, donc cela demande sa propre décision, pas une réécriture isofonctionnelle. */
/* `_forms.css` n'est pas concerné : il recopie Bootstrap 3.4.1 mot pour mot, et doit rester */
/* comparable à sa source. */
:root {
  /* ---- Neutres */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-gray: #d3d3d3; /* le gris des bordures, écrit `lightgray` ou `#d3d3d3` jusque-là */

  /* ---- General */
  /* --color-red: #C95454; // rouge charte Clem */
  --color-red: #be4f4f; /* rouge suite à l'audit accessibilité */
  --color-hover-red: #bd6060;
  --color-destroy: #cb2431; /* le rouge des liens qui suppriment (.link-destroy) */
  --color-dark: #182c48;

  /* ---- Freemium */
  /* --color-peach: #EB7972; */
  --color-peach: #b54848;
  --color-yellow: #ffc82e;
  --color-hover-yellow: #f4ede3;
  --color-amber: #f5b44e;
  --color-amber-dark: #ea9c0b;

  /* ---- Premium */
  --color-blue: #4a6a96;
  --color-hover-blue: #7391ba;
  --color-active-blue: #425a7a; /* l'ombre interne qui remplit un bouton bleu au survol */
  --color-turquoise: #42babd;
  --color-hover-turquoise: #7bcfd1;

  /* ---- Les trois turquoises de l'identité, à quelques points de teinte près les unes des autres */
  --color-teal: #0584a5; /* boutons d'action (.btn-pay, .btn-action) */
  --color-teal-soft: #1684a3; /* titres et liens de l'École et des Réglages */
  --color-teal-light: #50b6d9; /* le soulignement d'un onglet actif */

  /* ---- Business */
  --color-purple: #583262;
  --color-hover-purple: #673b73;
  --color-dark-blue: #2d316b;

  /* ---- Anciennes, quelques feuilles les lisent encore */
  --background-color: var(--color-white);
  --link-color: blue;
  --burger-color: var(--color-white);
  --secondary-color: #405f95;

  /* ---- Le verdict d'un entraînement, les mêmes trois couleurs dans #training-history-table */
  /* (bots.scss) et dans #myflint-container, déclarées jusque-là dans chacune des deux feuilles */
  --match-color: #34b49f;
  --ignore-color: #939393;
  --dontmatch-color: #ad3d49ff;

  /* ---- Les plans */
  /* Bootstrap 3 occupe déjà 990, 1000 (menu déroulant et barre de navigation), 1030 (barre fixe en */
  /* haut), 1040 (fond de boîte modale), 1050 (boîte modale), 1060 (bulle) et 1070 (infobulle) : */
  /* l'échelle ci-dessous se glisse entre les siennes, aux valeurs que les feuilles portaient déjà. */
  /* Un `z-index: 1` reste écrit en clair là où il est : il ne dit pas un rang dans cette échelle, */
  /* mais « devant mon voisin », dans son propre contexte d'empilement. */
  --z-toolbar-menu: 101; /* le menu « + » de la barre d'outils d'un élément de lettre */
  --z-slideout-mask: 999; /* le voile du panneau latéral */
  --z-slideout: 1000; /* le panneau latéral */
  --z-modal: 1001; /* la boîte de dialogue plein écran du panneau, par-dessus le reste */

  /* ---- Fonts */
  --font-family-text: "Lexend", sans-serif;
  --font-family-header: "Noto Serif", serif;
}