Oui, avant tout recours à JS on devrait vérifier que ce n'est pas possible en CSS/HTML5 pur...

Le nesting est en effet un game changer, même si la dernière fois que j'ai voulu reprendre le CSS de mon appli de documents/exerciseur pour le collège, j'avais omis de compter avec le manque de mises à jours sur les ordis du boulot.

Au passage, je me note les possibilités du RGB() pour dériver une couleur d'une autre: à utiliser dans mon framework perso... plus simple que les multiplications de variables CSS... On ne garde qu'une variable pour la couleur de base et on calcule les autres couleurs nécessaires...

 /* remove blue from a color */
rgb(from #123456 r g 0);
/* make a color transparent */
rgb(from #123456 r g b / 0.5);
/* make a color lighter */
hsl(from #123456 h s calc(l + 10));
/* change the hue in oklch color space */
oklch(from #123456 l c calc(h + 10));
/* mix two colors in oklab color space */
color-mix(in oklab, #8CFFDB, #04593B 25%);

Et ça marche avec des variables CSS:

*{
--base-color:red;
}
/Ajouter de la transparence/
.transparent{
hsl(from var(--base-color) h s calc(l + 12));
}
/ désaturer une couleur de base/
.desat{
color: hsl(from var(--base-color) h calc(s + -50) l);
}
/ complémentaire/
.complementaire{
hsl(from var(--base-color) calc(h + 180) s l);
}
/ plus loin : primary, seconday, tertiary/
.primary{
hsl(from var(--base-color) calc(h + 90) s l);
}
.secondary{
hsl(from var(--base-color) calc(h + 180) s l);
}
.tertiary{
hsl(from var(--base-color) calc(h + 270) s l);
}

De plus, depuis un an, on peut centrer officiellement un block verticalement sans quitter le display:block; à l'aide de align-content: center; #youpi

Et que dire de @starting-style qui permet de se passer de keyframes ?

 .toast {
  transition: opacity 1s, translate 1s;
  opacity: 1;
  translate: 0 0;
  @starting-style {
    opacity: 0;
    translate: 0 10px;
  }
}