/* =========================================================
   TEEMA – värit, fontit ja muodot yhdessä paikassa.
   Vaihda värit tästä tiedostosta. Muualla käytetään vain näitä muuttujia.
   Ilme: tumma metsänvihreä brändiväri (napit, värikaista, alatunniste), muuten valkoista ja vaaleaa. Inter-fontti.
   ========================================================= */

/* Inter (SIL Open Font License), omalta palvelimelta: ei ulkoisia palveluita eikä evästeitä */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fontit/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brändiväri: tumma metsänvihreä. Yläosan kaista, napit, tunnus, alatunniste */
  --vari-paa:            #14463C;
  --vari-paa-tumma:      #0E2F29;
  --vari-paa-vaalea:     #E9F0EE;

  /* Toimintaväri = brändiväri (napit). Valkoinen teksti täyttää WCAG AA:n. */
  --vari-korostus:       #14463C;
  --vari-korostus-tumma: #0E2F29;
  --vari-korostus-vaalea:#E9F0EE;

  /* Tunnuksen lehdet: tummanvihreä (kuten varsi) ja kulta */
  --vari-lehti:          #14463C;
  --vari-merkki:         #C39A35;

  /* Pääkehotus (Jätä ilmoitus -napit): puolukanpunainen, vihreän vastaväri. Valkoinen teksti täyttää WCAG AA:n. */
  --vari-toiminto:       #C2255C;
  --vari-toiminto-tumma: #A61E4D;

  /* Kulta: pienet korostukset (nostettu ilmoitus, suosittelut, Erede-merkki ylläpidossa) */
  --vari-kulta:          #94701F;
  --vari-kulta-tumma:    #7E5E19;

  /* Taustat ja tekstit */
  --vari-tausta:         #F8F9F8;
  --vari-pinta:          #FFFFFF;
  --vari-vaalea-osio:    #F0F4F2;
  --vari-teksti:         #17201D;
  --vari-teksti-heikko:  #55605B;
  --vari-raja:           #E1E5E2;
  --vari-teksti-tummalla:#FFFFFF;
  --vari-harmaa-pinta:   #F1F3F1;

  /* Fontit */
  --fontti:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fontti-otsikko: var(--fontti);

  /* Muodot */
  --pyoristys:      8px;
  --pyoristys-iso:  12px;
  --pyoristys-nappi: 999px;
  --varjo:          0 1px 2px rgba(23, 32, 29, 0.05), 0 2px 8px rgba(23, 32, 29, 0.04);
  --varjo-iso:      0 12px 32px rgba(23, 32, 29, 0.12);
}