/* ===========================================================================
   TELOBOARD — YLÄKAISTAN SÄVYT
   ---------------------------------------------------------------------------
   Tämä tiedosto sisältää VAIN --yla-* -muuttujat. Se on erillään pulse.css:stä
   siksi, että samat arvot tarvitaan kahdessa eri dokumentissa:

     1. portaalin omat sivut   <body class="pulse-sovellus" data-savy="...">
     2. työkalukehyksen iframe <html data-savy="...">

   Iframen sisältö on pienoisohjelman oma sivu, eikä siihen voi ladata
   pulse.css:ää: se tyylittelisi ohjelman uusiksi. Ilman tätä tiedostoa paletti
   olisi kahdessa paikassa, ja sävyn lisäys tai korjaus tehtäisiin ennen pitkää
   vain toiseen.

   MIKSI HEKSAT EIVÄT OLE var(--yo) JA var(--lavender-reuna):
   iframessa ei ole telog.css:ää, joten niiden nimien takana ei ole arvoa ja
   koko ominaisuus jäisi asettamatta. Neljä arvoa on siksi kirjoitettu tähän
   auki. Lähde on telog.css:n :root, ja paletti on lukittu (Mikan päätös
   4.9.2026), joten se ei elä.

   JÄRJESTYS RATKAISEE. Sävylohkot ovat perusarvojen JÄLKEEN, ja iframen
   valitsin html[data-savy="x"] on yhtä spesifinen kuin perusarvojen
   html[data-savy]. Älä siirrä perusarvoja tiedoston loppuun.

   Sävyn tarkoitus: se vaihtaa VAIN tumman yläkaistan. Yläpalkki, kortit ja
   merkitysvärit (vihreä = ok, punainen = virhe) ovat samat kaikissa sävyissä,
   jotta sama väri ei tarkoita eri asiaa eri käyttäjillä.
   =========================================================================== */

/* ---------- perusarvot (sävy "Yö") ---------- */
body.pulse-sovellus,
html[data-savy]{
  --yla-pohja:#091833;                              /* telog.css: --yo */
  /* Kirjautumissivun liukuväri yö -> violetti -> indigo (.pulse-ylaosa,
     Mikan valinta 19.9.2026, "maltillinen"). Hieman läpikuultava, jotta
     Ulkoasu-sivulla valittu taustakuva näkyy sen alta. */
  --yla-huntu:
    radial-gradient(70% 70% at 86% 4%, rgba(136,117,185,.30) 0%, rgba(70,38,117,.10) 55%, rgba(70,38,117,0) 80%),
    linear-gradient(150deg, rgba(9,24,51,.95) 0%, rgba(42,24,72,.88) 52%, rgba(70,38,117,.86) 100%);
  --yla-teksti:#ffffff;
  --yla-himmea:rgba(255,255,255,.74);
  --yla-vaimea:rgba(255,255,255,.60);
  --yla-raja:rgba(255,255,255,.28);
  --yla-raja-heikko:rgba(255,255,255,.20);
  --yla-kortti:rgba(255,255,255,.06);
  --yla-lehti:rgba(201,195,253,.10);
  --yla-lehti-b:rgba(201,195,253,.07);
  /* Metallinen tuntuma: viisto valojuova ja ohut vaalea yläreuna. */
  --yla-kiilto:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.08) 45%,rgba(255,255,255,0) 60%);
  --yla-reuna:rgba(255,255,255,.16);
  /* Sisältöpaneelin yläreuna kaistan päällä; tummalla pelkkä varjo riittää. */
  --yla-paneeliraja:transparent;
  --yla-merkki:rgba(201,195,253,.22);
  --yla-merkki-ikoni:#C9C3FD;                       /* telog.css: --lavender-reuna */
  --yla-piste:#C9C3FD;
  --yla-raita:repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 6px,rgba(255,255,255,.04) 6px 12px);
  /* Taustakuvan läpinäkyvyys. Vaaleat sävyt kirjoittavat tämän uusiksi. */
  --yla-kuva-lapinakyvyys:.42;

  /* MERKITSEVÄT VÄRIT KAISTALLA. Vihreä, keltainen ja punainen tarkoittavat
     aina samaa (ok, huomio, virhe), mutta sävyn on vaihduttava pohjan mukaan:
     sivuston tumma vihreä #1E5B37 on tummalla kaistalla lähes lukukelvoton.
     Merkitys pysyy, kirkkaus muuttuu — ei toisin päin. */
  --yla-vihrea:#7FD1A0;
  --yla-keltainen:#F0C475;
  --yla-punainen:#F0968C;

  /* Valkoinen logo (assets/telog-logo.png) sävyn mukaisella kaistalla,
     esim. työkalukehyksen palkissa. Vaaleat sävyt kääntävät sen tummaksi. */
  --yla-logo-suodatin:none;
}

/* ---------- tummat sävyt ---------- */
body.pulse-sovellus[data-savy="violetti"],
html[data-savy="violetti"]{
  --yla-pohja:#462675;
  --yla-huntu:
    radial-gradient(100% 90% at 85% 4%, rgba(136,117,185,.55) 0%, rgba(70,38,117,.20) 55%, rgba(70,38,117,0) 80%),
    linear-gradient(160deg, rgba(70,38,117,.92) 0%, rgba(49,24,79,.90) 55%, rgba(9,24,51,.94) 100%);
}
body.pulse-sovellus[data-savy="sininen"],
html[data-savy="sininen"]{
  --yla-pohja:#00557C;
  --yla-huntu:
    radial-gradient(100% 90% at 86% 4%, rgba(201,195,253,.30) 0%, rgba(0,85,124,.20) 55%, rgba(0,85,124,0) 80%),
    linear-gradient(165deg, rgba(0,85,124,.92) 0%, rgba(1,61,92,.92) 55%, rgba(2,41,62,.95) 100%);
  /* .74 eika perusarvo .60: petrooli on kaistan pohjista vaalein, ja .60:lla
     .pp-varjo b ja .pp-tuoreus jaivat mitattuna 4,26-4,42:1 eli juuri AA-rajan
     alle. Sama korjaus ja sama arvo kuin liilassa ja vaaleassa. Vika oli tassa
     jo ennen taustakuvaa: ilman kuvaa sama kohta oli 4,23:1. */
  --yla-vaimea:rgba(255,255,255,.74);
}

/* ---------- vaaleat sävyt ----------
   Vaaleat kääntävät tekstin tummaksi, joten KAIKKI --yla-* on kirjoitettava
   uusiksi: valkoisen läpikuultavat sävyt katoaisivat vaalealla pohjalla. */
body.pulse-sovellus[data-savy="liila"],
html[data-savy="liila"]{
  --yla-pohja:#EDEAFB;
  --yla-huntu:
    radial-gradient(100% 90% at 86% 2%, rgba(136,117,185,.22) 0%, rgba(201,195,253,.30) 50%, rgba(237,234,251,.86) 100%),
    linear-gradient(170deg, rgba(240,238,252,.90) 0%, rgba(226,221,248,.92) 60%, rgba(214,208,244,.94) 100%);
  --yla-teksti:#241442;
  --yla-himmea:rgba(36,20,66,.74);
  /* .74 eika .60: .60 jai kaistan tummimmassa kohdassa kontrastiin 3,6:1,
     kun .pp-tuoreus ja .pp-varjo b lukevat tata muuttujaa. */
  --yla-vaimea:rgba(36,20,66,.74);
  --yla-raja:rgba(70,38,117,.22);
  --yla-raja-heikko:rgba(70,38,117,.18);
  --yla-kortti:rgba(255,255,255,.62);
  --yla-lehti:rgba(70,38,117,.06);
  --yla-lehti-b:rgba(136,117,185,.10);
  --yla-kiilto:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.45) 45%,rgba(255,255,255,0) 60%);
  --yla-reuna:rgba(255,255,255,.60);
  --yla-paneeliraja:rgba(70,38,117,.14);
  --yla-merkki:rgba(136,117,185,.22);
  --yla-merkki-ikoni:#462675;                       /* telog.css: --indigo */
  /* invert + hue-rotate: valkoinen tummuu, mutta lehden violetti pysyy
     violettina eikä muutu mustaksi kuten brightness(0):lla. */
  --yla-logo-suodatin:invert(1) hue-rotate(180deg);
  --yla-piste:#8875B9;                              /* telog.css: --lavender */
  --yla-raita:repeating-linear-gradient(135deg,rgba(70,38,117,.13) 0 6px,rgba(70,38,117,.05) 6px 12px);
  /* Vaalealla pohjalla merkitysvärit ovat sivuston omat tummat sävyt. */
  --yla-vihrea:#1E5B37;
  --yla-keltainen:#7A5310;
  --yla-punainen:#8E2F25;
}
body.pulse-sovellus[data-savy="vaalea"],
html[data-savy="vaalea"]{
  --yla-pohja:#F3F5F7;
  --yla-huntu:
    radial-gradient(100% 90% at 86% 2%, rgba(201,195,253,.34) 0%, rgba(243,245,247,.70) 55%, rgba(243,245,247,.92) 100%),
    linear-gradient(170deg, rgba(255,255,255,.92) 0%, rgba(243,245,247,.94) 55%, rgba(233,238,242,.96) 100%);
  --yla-teksti:#111C2E;
  --yla-himmea:rgba(17,28,46,.74);
  --yla-vaimea:rgba(17,28,46,.74);   /* ks. liila-savyn perustelu */
  --yla-raja:rgba(17,28,46,.18);
  --yla-raja-heikko:rgba(17,28,46,.14);
  --yla-kortti:rgba(255,255,255,.78);
  --yla-lehti:rgba(70,38,117,.06);
  --yla-lehti-b:rgba(136,117,185,.10);
  --yla-kiilto:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 60%);
  --yla-reuna:rgba(255,255,255,.70);
  --yla-paneeliraja:rgba(17,28,46,.12);
  --yla-merkki:rgba(136,117,185,.20);
  --yla-merkki-ikoni:#462675;
  --yla-logo-suodatin:invert(1) hue-rotate(180deg);
  --yla-piste:#8875B9;
  --yla-raita:repeating-linear-gradient(135deg,rgba(17,28,46,.11) 0 6px,rgba(17,28,46,.04) 6px 12px);
  /* Vaalealla pohjalla merkitysvärit ovat sivuston omat tummat sävyt. */
  --yla-vihrea:#1E5B37;
  --yla-keltainen:#7A5310;
  --yla-punainen:#8E2F25;
}