/* =====================================================================
   VÄRILÄISKÄ · TEEMA "KIRKAS" — logon värit (Pian toive 10.9.2026)
   Pohja: logon sininen #0098F0 (wordmark), läiskän värit
   #D44817 #EBC225 #B3CF29 #4BA628 #069471 #0D86C6 #B60F38.
   Logon sininen #0098F0 on 3,11:1 valkoisella → riittää isoon tekstiin
   ja UI-elementteihin (3:1), EI leipätekstiin/linkkeihin. Napit ja
   linkit käyttävät #0077C8 (4,70:1). Tausta puhdas valkoinen.
   ===================================================================== */
:root {
  /* --- Brändivärit --- */
  --vari-tumma:      #063a66;  /* tumma sininen: footer ja tumma osio */
  --vari-korostus:   #0077c8;  /* napit, linkit, h1-korostus — 4,70:1 valkoisella (AA) */
  --vari-korostus-2: #0098f0;  /* logon sininen: ikoniympyrät, korttien reunat, isot otsikot — 3,11:1, EI leipätekstiin */
  --vari-vaalea:     #eaf4fc;  /* vaaleat taustalohkot ja kortit */
  --vari-tausta:     #ffffff;  /* puhdas valkoinen (Pia: ei murrettuja sävyjä) */
  --vari-hero:       #ffffff;  /* hero valkoinen — hero-kirkas ei käytä kuvaa */

  /* --- Johdetut värit (yleensä ei tarvitse muuttaa) --- */
  --vari-tumma-rgb:         6, 58, 102;  /* --vari-tumma R,G,B-erillään — läpikuultaviin taustoihin, esim. rgba(var(--vari-tumma-rgb), .75) */
  --vari-teksti:            #10233a;
  --vari-teksti-himmea:     #3d5570;  /* korttien ja kappaleiden leipäteksti */
  --vari-teksti-tummalla:   #ffffff;  /* teksti tummalla taustalla (footer, osio-tumma) */
  --vari-linkki-tummalla:   #ffd633;  /* linkit tummalla taustalla */
  --vari-korostus-hover:    #0069b4;  /* napin hover */
  --vari-korostus-2-tumma:  #0069b4;  /* korostus-2 tekstinä — AA vaalealla */
  --vari-reuna:             #cfe3f3;  /* yläpalkin ja erottimien viiva */
  --vari-varjo:             rgba(6, 58, 102, .10);   /* korttien varjo */
  --vari-hover-pinta:       rgba(0, 119, 200, .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.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 */
  --riviheitto: 1.6;

  /* --- Mitat ja muodot --- */
  --sisallon-leveys: 1040px;
  --pyoristys: 12px;         /* korttien ja nappien kulmat — hillitympi kuin pyöreä sapluunaoletus, sopii rakennusalalle */
  --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");
}

/* Ikonit valkoisina logon sinisellä ympyrällä (--vari-korostus-2 #0098f0):
   valkoinen/#0098f0 = 3,11:1 ≥ 3:1 (ei-tekstisisältö). tyyli.css:n oletus
   (tumma viiva) antaisi #10233a/#0098f0 = 5,1:1 — molemmat kelpaavat,
   valkoinen valittu ilmeen takia. */
.ikoni-tausta .ikoni { color: #ffffff; }

/* Sateenkaarinauha — logon läiskästä johdettu brändielementti.
   Värit mitattu Pian logo-JPEG:stä 10.9.2026. */
.nauha {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg,
    #d44817 0%, #ebc225 18%, #b3cf29 34%, #4ba628 50%,
    #069471 64%, #0d86c6 82%, #b60f38 100%);
}

/* Hero-kirkas-korttien reunavärit (osio 14, tyyli.css) — asiakaskohtainen
   väripäätös kuuluu teematiedostoon, ei jaettuun komponenttitiedostoon.
   1. kortti käyttää tyyli.css:n oletusta (--vari-korostus-2). */
.hero-kirkas-kortit .kortti:nth-child(2) { border-left-color: #ebc225; }
.hero-kirkas-kortit .kortti:nth-child(3) { border-left-color: #4ba628; }

/* Referenssit-osion listarivit (index.html): sama sateenkaari kuin
   .nauha:ssa ja logossa, pyytänyt asiakas 10.9.2026 ("vähän samaa
   teemaa tuohonkin"). li:n border-left-width/style tulee HTML:n inline-
   tyylistä (index.html) — vain väri täältä, jotta CSS voi ohjata sitä
   (inline border-left-color veisi muuten aina voiton). Kiertää 7 väriä,
   sama järjestys kuin .nauha-liukuvärissä; jokainen <ul> alkaa alusta. */
#referenssit .kortti li:nth-child(7n+1) { border-left-color: #d44817; }
#referenssit .kortti li:nth-child(7n+2) { border-left-color: #ebc225; }
#referenssit .kortti li:nth-child(7n+3) { border-left-color: #b3cf29; }
#referenssit .kortti li:nth-child(7n+4) { border-left-color: #4ba628; }
#referenssit .kortti li:nth-child(7n+5) { border-left-color: #069471; }
#referenssit .kortti li:nth-child(7n+6) { border-left-color: #0d86c6; }
#referenssit .kortti li:nth-child(7n+7) { border-left-color: #b60f38; }