/* tyyli.css — kirjaudu-portaalin oma ulkoasu.
 *
 * ITSENÄINEN: ei riipu sivuston teemoista (css/teemat), fonttitiedostoista
 * (css/fontit.css) eikä kuvista (kuvat/taustakuva). Portaalin sivujen omat
 * <style>-lohkot käyttävät alla olevia CSS-muuttujia — sama muuttujanimistö
 * kuin sivustolla, joten sivut toimivat sellaisenaan.
 *
 * TÄSSÄ TIEDOSTOSSA olevat arvot ovat TARKOITUKSELLA brändineutraaleja
 * oletusarvoja — eivät minkään tietyn asiakkaan värejä — koska tämä sama
 * kirjaudu-kansio on tarkoitettu asennettavaksi sellaisenaan MILLE TAHANSA
 * sivustolle. Jos sivuston juuressa on brandi.json-tiedosto, brandi.php
 * (ks. jokaisen sivun <head>, tyyli.css-linkin jälkeinen rivi) ylikirjoittaa
 * osan näistä muuttujista ajonaikaisesti inline-<style>-lohkolla — tämä
 * tiedosto ei siis koskaan itse tiedä mistään tietystä asiakkaasta, vain
 * "riittävän hyvästä" oletusilmeestä joka näyttää siistiltä jos brandi.json
 * puuttuu kokonaan.
 *
 * Fontit ovat järjestelmäfontteja (ei ladattavia tiedostoja), jolloin
 * portaali ei tarvitse fonts/-kansiota ja latautuu nopeasti.
 * Tausta on rauhallinen, brändineutraali tummanharmaa liukuväri
 * kuvatiedoston sijaan.
 */

:root {
    /* Fontit — järjestelmäpinot, ei ulkoisia riippuvuuksia */
    --font-teksti: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-otsikko: Georgia, 'Times New Roman', serif;

    /* Tekstivärit — neutraaleja harmaan sävyjä, sopivat minkä tahansa
       brändin rinnalle sellaisenaan, joten brandi.json ei yleensä tarvitse
       ylikirjoittaa näitä. */
    --vari-teksti: #333;
    --vari-tumma: #2c3e50;

    /* Korostusväri — brändineutraali sinihalli sävy (EI minkään tietyn
       asiakkaan väri). brandi.json:n "vari_korostus" ylikirjoittaa tämän
       asiakaskohtaiseksi, ks. brandi.php. */
    --vari-korostus: #4b6c8c;
    --vari-korostus-rgb: 75, 108, 140;
    --vari-korostus-hover: #3d5a75;
    --vari-korostus-tumma: #33495f;
    --vari-korostus-linkki: #34506a;

    /* Tausta: OLETUKSENA TYHJÄ/VALKOINEN, ei kuvaa eikä liukuväriä — sivu
       avataan aina tavallisena kokosivun linkkinä (ei iframe/ylikerros),
       joten "läpinäkyvä tausta" ei voisi näyttää edellisen sivun läpi;
       lopputulos olisi silti vain selaimen valkoinen pohja. Siksi
       valkoinen/tyhjä on valittu suoraan oletukseksi, ei kiertotietä.
       --tausta-kuva pidetään silti CSS-muuttujana (arvo "none"), koska
       sivujen inline-tyylit käyttävät sitä background-lyhennemerkinnässä
       kuvan paikalla — brandi.json voi antaa tähän oikean kuvan tai
       liukuvärin jos asiakas niin haluaa (ks. brandi.php). */
    --tausta-kuva: none;
    --tausta-peite: transparent;

    /* Taustan päällä istuva teksti (esim. .yla-rivi-otsikko ja "takaisin"-
       painike, jotka ovat kortin ULKOPUOLELLA suoraan body-taustan päällä).
       Oletuksena tumma, koska oletustausta on nyt valkoinen — jos
       brandi.json antaa tumman tausta_kuva-arvon, sen tulee antaa myös
       vaalea vari_paalla_teksti-arvo luettavuuden säilyttämiseksi. */
    --vari-paalla-teksti: #333333;
    --vari-paalla-teksti-rgb: 51, 51, 51;
}
