/* ============================================
   WAB OS — les six teintes
   Bleu électrique (le Klein, par défaut), bleu ciel, vert, jaune, rose
   et rouge. Un bloc prend une teinte avec data-tint="vert" : toute la
   gamme --klein-* change pour lui et ses enfants, et les dérivés
   (touches, écrans, fenêtres, bulles) suivent (os-tokens.css).

   Chaque teinte donne sept nuances, comme le Klein :
     --klein       l'aplat ;
     --klein-hi    sa lumière (reflets, halo des écrans) ;
     --klein-ink   la teinte lisible en petit texte sur blanc (≥ 4,5:1) ;
     --klein-deep  le liseré des touches, les lignes sombres ;
     --klein-tint / --klein-wash  barres de fenêtre, survols ;
     --klein-soft  la teinte lisible sur fond sombre ;
   et deux encres : --on-klein (le texte posé sur l'aplat : blanc sur
   les teintes sombres, encre sur les claires) et --klein-pair (le texte
   d'une touche claire posée sur l'aplat) ; --klein-text, la teinte
   quand elle écrit sur blanc (l'aplat, ou sa version foncée).
   ============================================ */

[data-tint='bleu'] {
    --klein: oklch(0.45 0.29 266);
    --klein-hi: oklch(0.56 0.25 266);
    --klein-ink: oklch(0.38 0.24 266);
    --klein-deep: oklch(0.3 0.19 266);
    --klein-tint: oklch(0.9 0.055 268);
    --klein-wash: oklch(0.955 0.022 268);
    --klein-soft: oklch(0.8 0.1 268);
    --on-klein: oklch(1 0 0);
    --klein-pair: oklch(0.38 0.24 266);
    --klein-text: oklch(0.45 0.29 266);
}

[data-tint='ciel'] {
    --klein: oklch(0.8 0.12 232);
    --klein-hi: oklch(0.88 0.09 232);
    --klein-ink: oklch(0.45 0.12 242);
    --klein-deep: oklch(0.56 0.12 240);
    --klein-tint: oklch(0.93 0.045 232);
    --klein-wash: oklch(0.97 0.02 232);
    --klein-soft: oklch(0.84 0.1 232);
    --on-klein: oklch(0.18 0.005 265);
    --klein-pair: oklch(0.45 0.12 242);
    --klein-text: oklch(0.45 0.12 242);
}

[data-tint='vert'] {
    --klein: oklch(0.8 0.21 145);
    --klein-hi: oklch(0.88 0.17 145);
    --klein-ink: oklch(0.45 0.13 150);
    --klein-deep: oklch(0.55 0.15 150);
    --klein-tint: oklch(0.93 0.07 145);
    --klein-wash: oklch(0.97 0.03 145);
    --klein-soft: oklch(0.84 0.17 145);
    --on-klein: oklch(0.18 0.005 265);
    --klein-pair: oklch(0.45 0.13 150);
    --klein-text: oklch(0.45 0.13 150);
}

[data-tint='jaune'] {
    --klein: oklch(0.9 0.18 102);
    --klein-hi: oklch(0.95 0.14 102);
    --klein-ink: oklch(0.46 0.1 90);
    --klein-deep: oklch(0.66 0.14 92);
    --klein-tint: oklch(0.95 0.08 102);
    --klein-wash: oklch(0.98 0.035 102);
    --klein-soft: oklch(0.92 0.15 102);
    --on-klein: oklch(0.18 0.005 265);
    --klein-pair: oklch(0.46 0.1 90);
    --klein-text: oklch(0.46 0.1 90);
}

[data-tint='rose'] {
    --klein: oklch(0.77 0.16 350);
    --klein-hi: oklch(0.85 0.12 350);
    --klein-ink: oklch(0.48 0.18 355);
    --klein-deep: oklch(0.56 0.17 355);
    --klein-tint: oklch(0.93 0.05 350);
    --klein-wash: oklch(0.97 0.022 350);
    --klein-soft: oklch(0.84 0.12 350);
    --on-klein: oklch(0.18 0.005 265);
    --klein-pair: oklch(0.48 0.18 355);
    --klein-text: oklch(0.48 0.18 355);
}

[data-tint='rouge'] {
    --klein: oklch(0.55 0.22 28);
    --klein-hi: oklch(0.65 0.2 30);
    --klein-ink: oklch(0.48 0.19 28);
    --klein-deep: oklch(0.4 0.16 28);
    --klein-tint: oklch(0.92 0.045 28);
    --klein-wash: oklch(0.97 0.02 28);
    --klein-soft: oklch(0.78 0.12 28);
    --on-klein: oklch(1 0 0);
    --klein-pair: oklch(0.48 0.19 28);
    --klein-text: oklch(0.55 0.22 28);
}