:where(.plus-app-2026-07-hintojen-kehitys) {
  --plus-korostus: #f26659; /* yds-color-news-orange-50 */
  --plus-korostus-2: #7c59fa; /* yds-color-news-violet-40 */
  --plus-korostus-3: #9479fb; /* yds-color-news-violet-30 */

  /* Teemavärit: käytä aina prioriteettijärjestyksessä 1 → N, ks. AGENTS.md */
  --plus-teemavari-1: #00b4c8; /* yds-color-turquoise-50 */
  --plus-teemavari-2: #0b54b4; /* yds-color-info-blue-90 */
  --plus-teemavari-3: #f56a1b; /* yds-color-info-orange-60 */
  --plus-teemavari-4: #80259f; /* yds-color-info-purple-60 */
  --plus-teemavari-5: #2f2372; /* yds-color-news-violet-80 */
  --plus-teemavari-aksentti: #f26659; /* yds-color-news-orange-50 */

  /* Visualisointien oletusasteikko (vaihda projektikohtaisesti). Ks. docs/varipaletit.md.
     sequential = absoluuttinen data (matala→korkea); diverging = etumerkillinen/keskitetty data. */
  --plus-teemavari-asteikko: var(--plus-asteikko-violetti-5);
  --plus-teemavari-asteikko-diverging: var(--plus-asteikko-violetti-oranssi-9);

  /* WCAG-kontrastin mukaan valitut tekstivärit teemavärien päälle, ks. AGENTS.md */
  --plus-teemavari-1-teksti: var(--yds-color-text-dark);
  --plus-teemavari-2-teksti: var(--yds-color-text-light);
  --plus-teemavari-3-teksti: var(--yds-color-text-dark);
  --plus-teemavari-4-teksti: var(--yds-color-text-light);
  --plus-teemavari-5-teksti: var(--yds-color-text-light);
  --plus-teemavari-aksentti-teksti: var(--yds-color-text-dark);
}

:where(.plus-app-2026-07-pintavedet).taustavari,
:where(.plus-app-2026-07-pintavedet) .taustavari {
  --color-background: #e6e5ff; /* yds-color-news-violet-5 */
  --color-leipis-background: #e6e5ff;
}