/* =====================================================================
   SIVUKAS-SAPLUUNA · TEEMATIEDOSTO (design-tokenit)
   =====================================================================
   Tämä tiedosto on sivuston AINOA paikka, jossa ulkoasun perusarvot
   (värit, fontit, mitat) määritellään. Komponenttityylit (tyyli.css)
   käyttävät vain näitä muuttujia — älä kovakoodaa värejä sinne.

   Teema: "Persikka & metsä" (päätetty 28.7.2026).
   Hero ei ole enää tumma lohko — tumma esiintyy vain footerissa.

   Asiakassivustolla n8n/tilauslomake kirjoittaa tämän tiedoston arvot
   asiakkaan valintojen mukaan. Valmiit teemavariantit: css/teemat/.

   Saavutettavuus: tekstivärien kontrasti taustaan on tarkistettu
   (WCAG AA, vähintään 4.5:1). Jos muutat värejä, tarkista kontrastit.
   ===================================================================== */

:root {
  /* --- Brändivärit --- */
  --vari-tumma:      #16463c;  /* metsänvihreä: pääteksti ja footer */
  --vari-korostus:   #0e7c66;  /* napit, linkit, maskotin runko */
  --vari-korostus-2: #ef8b4e;  /* persikkaoranssi: ikonit, maskotin kädet */
  --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-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, maskotin yläpalkki */
  --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 ---
     Brändifontit ladataan self-hosted woff2:na (EI Google Fonts -linkkiä).
     TODO: lataa tiedostot esim. https://gwfh.mranftl.com (google-webfonts-helper):
       fonts/karla-v31-latin-regular.woff2   (400)
       fonts/karla-v31-latin-700.woff2       (700)
       fonts/instrument-serif-v5-latin-regular.woff2
     ja poista kommentit alta @font-face-lohkoista. Siihen asti fallbackit
     (system-ui / Georgia) hoitavat — sivu toimii täysin ilman fontteja. */
  --fontti:         Karla, system-ui, -apple-system, sans-serif;
  --fontti-otsikko: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fonttikoko-perus: 1.1875rem;
  --fonttikoko-h1: clamp(2.9rem, 5.6vw, 3.9rem);  /* sankariotsikko skaalautuu */
  --fonttikoko-h2: 2.5rem;
  --fonttikoko-h3: 1.375rem;
  --otsikko-paino: 400;   /* serif-otsikot ohuina; sans-teemoissa 700 */
  --riviheitto: 1.6;

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

/* @font-face-lohkot — poista kommentit kun woff2-tiedostot ovat fonts/-kansiossa. */

@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");
}