/* Copyright 2026 Soumaia Bouhouia
 *
 * La palette officielle de Paris, Ladouceur & Associés, traduite en jetons Web
 * Awesome. Ce fichier ne contient QUE des déclarations de variables.
 *
 * Trois choses à savoir avant d'y toucher :
 *
 * 1. Web Awesome dérive tout de deux échelles. Ses jetons sémantiques
 *    (--wa-color-brand-fill-loud, --wa-color-surface-default…) ne sont pas des
 *    couleurs mais des renvois vers --wa-color-brand-NN et
 *    --wa-color-neutral-NN. Redéfinir les deux échelles suffit donc à reteindre
 *    toute l'interface, clair et sombre compris. Les valeurs reprises plus bas
 *    sont les seules que la dérivation ne donne pas juste.
 *
 * 2. Les échelles sont numérotées à l'envers de la charte : Web Awesome va du
 *    clair (95) au foncé (05), la charte de 50 à 950.
 *
 * 3. Tout ce que livre Web Awesome vit dans des couches de cascade. Du CSS sans
 *    couche l'emporte toujours, quelle que soit la spécificité : c'est pourquoi
 *    un simple :root suffit et qu'aucun !important n'est nécessaire. Ne pas
 *    envelopper ce fichier dans un @layer.
 */

/* ── Les échelles ── */

:root {
  /* Marque - bleu Paris Ladouceur */
  --wa-color-brand-95: #bcffff; /* charte : primary-50  */
  --wa-color-brand-90: #aff7ff; /* charte : primary-100 */
  --wa-color-brand-80: #97e6ff; /* charte : primary-200 */
  --wa-color-brand-70: #76cdf2; /* charte : primary-300 */
  --wa-color-brand-60: #4cafd7; /* charte : primary-400 */
  --wa-color-brand-50: #1e93bb; /* charte : primary-500 */
  --wa-color-brand-40: #00769b; /* charte : primary-600 */
  --wa-color-brand-30: #005e80; /* charte : primary-700 */
  --wa-color-brand-20: #004866; /* charte : primary-800 */
  --wa-color-brand-10: #003853; /* charte : primary-900 */
  --wa-color-brand-05: #001d32; /* charte : primary-950 */

  /* Neutres - gris légèrement bleutés, assortis à la marque */
  --wa-color-neutral-95: #eff7fa; /* charte : neutral-50  */
  --wa-color-neutral-90: #e5edf0; /* charte : neutral-100 */
  --wa-color-neutral-80: #d2dbde; /* charte : neutral-200 */
  --wa-color-neutral-70: #b9c2c5; /* charte : neutral-300 */
  --wa-color-neutral-60: #9aa4a8; /* charte : neutral-400 */
  --wa-color-neutral-50: #7e888c; /* charte : neutral-500 */
  --wa-color-neutral-40: #646d70; /* charte : neutral-600 */
  --wa-color-neutral-30: #4e5659; /* charte : neutral-700 */
  --wa-color-neutral-20: #3a4244; /* charte : neutral-800 */
  --wa-color-neutral-10: #2c3335; /* charte : neutral-900 */
  --wa-color-neutral-05: #15191b; /* charte : neutral-950 */

  /* La couleur clé de chaque échelle, et le texte qui se pose dessus. */
  --wa-color-brand: var(--wa-color-brand-50);
  --wa-color-brand-on: #ffffff;
  --wa-color-neutral: var(--wa-color-neutral-50);
  --wa-color-neutral-on: #ffffff;

  /* Le site officiel déclare 'acre-medium', Helvetica, Arial, Lucida,
   * sans-serif. Acre est payante : Outfit la remplace - même dessin géométrique
   * large, même grande hauteur d'x - derrière la même chaîne de repli.
   *
   * DM Mono ne sert qu'aux valeurs où l'alignement des chiffres compte. */
  --wa-font-family-body: 'Outfit', Helvetica, Arial, Lucida, sans-serif;
  --wa-font-family-heading: var(--wa-font-family-body);
  --wa-font-family-code: 'DM Mono', ui-monospace, monospace;
}

/* ── Les valeurs propres à chaque thème ──
 *
 * RÈGLE À NE PAS OUBLIER : tout jeton déclaré pour le thème clair doit AUSSI
 * l'être pour le thème sombre, même si la valeur de Web Awesome convenait.
 *
 * Parce que notre CSS est sans couche, il gagne sur tout ce que Web Awesome
 * déclare - y compris sur ses valeurs sombres. Un jeton posé seulement dans le
 * bloc clair s'appliquerait donc aussi en sombre : c'est ainsi qu'on se retrouve
 * avec du texte noir sur fond noir.
 *
 * Le sélecteur clair est en :where() pour rester à une spécificité de zéro, ce
 * qui laisse .wa-dark l'emporter - c'est la convention de Web Awesome lui-même.
 */

:where(:root),
.wa-light {
  /* Web Awesome dérive text-normal de neutral-10 et text-quiet de neutral-40.
   * La charte veut un texte plus contrasté (foreground = neutral-950). Pour le
   * texte secondaire, neutral-500 (la valeur de la charte) tombe sous 4.5:1
   * sur blanc (3.63:1) : neutral-40 reste plus pâle que text-normal tout en
   * passant le contraste minimal WCAG AA pour du texte. */
  --wa-color-text-normal: var(--wa-color-neutral-05);

  /* Le texte secondaire n'est plus gris mais bleu de la marque : la console est
   * bleue de bout en bout depuis le bandeau, et un gris neutre y faisait tache
   * partout où il servait (métadonnées de la liste, libellés, dates, comptes).
   * Un seul jeton à changer, tous les usages suivent.
   *
   * C'est le cran 20 et non le 10 : à 9.9:1 sur blanc il se lit franchement,
   * là où le 10 monterait à 12.4:1, soit à 1.4:1 du texte courant - les deux
   * niveaux ne se distingueraient plus. */
  --wa-color-text-quiet: var(--wa-color-brand-20);

  /* Idem pour les bordures : la charte les veut d'un cran plus marquées
   * (border = neutral-200) que le neutral-90 par défaut. */
  --wa-color-surface-border: var(--wa-color-neutral-80);

  /* Le fond creusé d'un cran plus franc que neutral-95 : à 95, une carte
   * blanche posée dessus n'était séparée que de 1.08:1, une différence réelle
   * mais invisible. C'est ce qui donnait l'impression de blanc sur blanc. */
  --wa-color-surface-lowered: var(--wa-color-neutral-90);

  /* Les ombres de Web Awesome valent 12 % d'opacité au repos, trop peu pour
   * détacher une carte d'un fond aussi clair. Et l'ombre est ici le seul
   * séparateur qui fonctionne : entre deux teintes pâles, l'écart de
   * luminance plafonne à 1.2:1 quel que soit le cran choisi. */
  --wa-color-shadow: rgb(21 25 27 / 14%);
  --pl-shadow-raised: 0 1px 2px rgb(21 25 27 / 10%), 0 4px 12px rgb(21 25 27 / 13%);

  /* Le bleu de la charte tombe entre deux crans de l'échelle : #0789b1 n'est
   * ni brand-50 (#1e93bb) ni brand-40 (#00769b). C'est LA couleur de la
   * firme, celle des boutons et de l'anneau de focus : elle est donc posée
   * telle quelle plutôt qu'approchée. */
  --wa-color-brand-fill-loud: #0789b1;
  --wa-color-brand-on-loud: #ffffff;
  --wa-color-focus: #0789b1;

  /* Les deux fonds discrets de la marque servent aux badges, aux cartes de
   * compteur et à la ligne sélectionnée dans la liste. Web Awesome les prend en
   * haut de l'échelle (brand-95 et brand-90), mais le haut de cette échelle est
   * un cyan très saturé : à côté des rouges et des ambres pastel du thème, ces
   * fonds criaient. Ils viennent donc de l'échelle accent de la charte, plus
   * calme, tandis que le texte posé dessus reste le bleu foncé de la marque. */
  --wa-color-brand-fill-quiet: #e4eff3; /* le panneau pâle du site */
  --wa-color-brand-fill-normal: #c9f4ff; /* charte : accent-100 */

  /* La charte veut des champs bordés de neutral-200, là où Web Awesome
   * utilise neutral-border-loud, bien plus foncé. */
  --wa-form-control-border-color: var(--wa-color-neutral-80);

  /* Accent - deux valeurs, pas une échelle. Web Awesome n'a que cinq variantes
   * (brand, neutral, success, warning, danger) et aucune ne peut être pilotée
   * par un accent : onze valeurs pour deux usages seraient du poids mort. Ces
   * deux-là viennent du site de la firme, où #91cadb teinte les titres de
   * section et #e4eff3 le fond des encadrés pâles. */
  --pl-accent: #91cadb;
  --pl-accent-quiet: #e4eff3;
}

.wa-dark,
.wa-invert {
  /* Ces trois-là tombent sur les mêmes crans que ceux de Web Awesome en sombre.
   * Ils sont repris quand même : sans ça, les valeurs claires ci-dessus
   * s'appliqueraient aussi ici. */
  --wa-color-text-normal: var(--wa-color-neutral-95);
  /* Même intention en sombre, mais dans l'autre sens : marquer le texte
   * secondaire veut dire l'éclaircir. 12.5:1 sur la carte. */
  --wa-color-text-quiet: #c4dde6;
  --wa-color-surface-border: var(--wa-color-neutral-20);

  /* En sombre la profondeur vient de surfaces plus CLAIRES : le fond creusé
   * doit donc passer sous neutral-05, qui sert déjà de surface par défaut. */
  --wa-color-surface-lowered: #0b0e10;
  --wa-color-shadow: rgb(0 0 0 / 55%);
  --pl-shadow-raised: 0 1px 2px rgb(0 0 0 / 45%), 0 4px 14px rgb(0 0 0 / 40%);

  /* La charte éclaircit la marque en sombre pour qu'elle reste lisible sur fond
   * foncé, et pose un texte foncé par-dessus. */
  --wa-color-brand-fill-loud: var(--wa-color-brand-60); /* #4cafd7 */
  --wa-color-brand-on-loud: var(--wa-color-neutral-05);
  --wa-color-focus: var(--wa-color-brand-60);

  /* En sombre les fonds discrets viennent du bas de l'échelle, donc pas de cyan
   * criard à corriger : ce sont les valeurs de Web Awesome, reprises telles
   * quelles pour ne pas hériter des claires. */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
  --wa-color-brand-fill-normal: var(--wa-color-brand-20);

  --wa-form-control-border-color: var(--wa-color-neutral-20);

  --pl-accent: #76acbc; /* charte sombre : accent-400 */
  --pl-accent-quiet: #1b4753; /* charte sombre : accent-800 */
}