/* =====================================================================
   SIVUKAS-SAPLUUNA · TEEMA "PERSIKKA & METSÄ"
   =====================================================================
   Lämmin, käsintehdyn oloinen ilme: metsänvihreä + persikkaoranssi,
   serif-otsikot (Instrument Serif) + sans-leipäteksti (Karla).

   Tämä tiedosto on yksi teemavaihtoehdoista (css/teemat/). Aktiivinen
   teema on aina css/teema.css — kopioi tämän tiedoston sisältö sinne
   ottaaksesi tämän teeman käyttöön (tai käytä n8n-tilausputkea, joka
   tekee saman asiakkaan valinnan mukaan).

   Saavutettavuus: tekstivärien kontrasti taustaan tarkistettu laskennalla
   (WCAG AA, vähintään 4,5:1 leipätekstille). Jos muutat värejä, tarkista
   kontrastit uudelleen — älä arvioi silmämääräisesti (ks. CLAUDE.md).
   ===================================================================== */

:root {
  /* --- Brändivärit --- */
  --vari-tumma:      #16463c;  /* metsänvihreä: pääteksti ja footer */
  --vari-korostus:   #0e7c66;  /* napit, linkit */
  --vari-korostus-2: #ef8b4e;  /* persikkaoranssi: ikonit */
  --vari-vaalea:     #fdefe3;  /* vaaleat taustalohkot ja kortit */
  --vari-tausta:     #fffaf4;  /* sivun perustausta (lämmin valkoinen) */
  --vari-hero:       #ffe8d6;  /* heron persikkatausta */

  /* --- Johdetut värit (yleensä ei tarvitse muuttaa) --- */
  --vari-tumma-rgb:         22, 70, 60;  /* --vari-tumma R,G,B-erillään — läpikuultaviin taustoihin, esim. rgba(var(--vari-tumma-rgb), .75) */
  --vari-teksti:            var(--vari-tumma);
  --vari-teksti-himmea:     #55655d;  /* korttien ja kappaleiden leipäteksti */
  --vari-teksti-tummalla:   #ffffff;  /* teksti tummalla taustalla (footer) */
  --vari-linkki-tummalla:   #ffd2ad;  /* linkit tummalla taustalla */
  --vari-korostus-hover:    #0a5f4e;  /* napin hover */
  --vari-korostus-2-tumma:  #c2521c;  /* oranssi tekstinä — AA vaalealla */
  --vari-reuna:             #f0dfcd;  /* yläpalkin ja erottimien viiva */
  --vari-varjo:             rgba(74, 45, 23, .07);   /* korttien varjo */
  --vari-hover-pinta:       rgba(22, 70, 60, .08);   /* toissijaisen napin hover */

  /* --- Typografia --- */
  --fontti:         Karla, system-ui, -apple-system, sans-serif;
  --fontti-otsikko: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fonttikoko-perus: 1.0625rem;
  --fonttikoko-h1: clamp(2.9rem, 5.6vw, 3.9rem);  /* sankariotsikko skaalautuu */
  --fonttikoko-h2: 2.5rem;
  --fonttikoko-h3: 1.1875rem;
  --otsikko-paino: 400;   /* serif-otsikot ohuina */
  --riviheitto: 1.65;

  /* --- Mitat ja muodot --- */
  --sisallon-leveys: 1040px;
  --pyoristys: 16px;         /* korttien ja nappien kulmat — pyöreä, pehmeä */
  --lohkovali: 5.5rem;       /* pystysuuntainen tila lohkojen välissä */
}

@font-face {
  font-family: Karla;
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/karla-v33-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: Karla;
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/karla-v33-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-v5-latin-regular.woff2") format("woff2");
}