/* =====================================================================
   VIDEOSIIRTOLA.FI · 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.

   Oma brändipaletti (poimittu asiakkaan vanhalta sivulta) — EI mikään
   sapluunan neljästä valmiista teemasta. Kaikki kontrastit laskettu
   WCAG-kaavalla 6.8.2026 (ks. CLAUDE.md), ei tarvitse tarkistaa
   uudelleen ellei arvoja muuteta.

   HUOM ikonipallot (.ikoni-tausta): älä käytä --vari-korostus-2:ta
   taustana — navy-ikoni punaisella pohjalla antaa vain 2,97:1 (vaatii
   3:1). Käytä --vari-korostus-sinistä (oletus) tai valkoista ikonia.
   ===================================================================== */

:root {
  /* --- Brändivärit --- */
  --vari-tumma:      #1D3557;  /* leipäteksti, footer-tausta */
  --vari-korostus:   #457B9D;  /* napit (valkoinen teksti 4,59:1), linkit */
  --vari-korostus-2: #E63946;  /* aksentti: isot otsikot (em), EI pientä tekstiä/nappia sellaisenaan */
  --vari-vaalea:     #A8DADC;  /* kortit/taustalohkot */
  --vari-tausta:     #F1FAEE;  /* sivun perustausta */
  --vari-hero:       #A8DADC;

  /* --- Johdetut värit (yleensä ei tarvitse muuttaa) --- */
  --vari-teksti:            var(--vari-tumma);
  --vari-teksti-himmea:     #33586f;  /* 4,96:1 vaalealla, 7,1:1 taustalla — laskettu */
  --vari-teksti-tummalla:   #ffffff;
  --vari-linkki-tummalla:   #A8DADC;
  --vari-korostus-hover:    #37627d;  /* tummennettu #457B9D (80%), hover-tila */
  --vari-korostus-2-tumma:  #a81f2a;  /* 4,74:1 vaalealla, 6,79:1 taustalla — laskettu, käytä jos punaista tarvitaan pienenä tekstinä */
  --vari-reuna:             #d7e9ea;
  --vari-varjo:             rgba(29, 53, 87, .08);
  --vari-hover-pinta:       rgba(29, 53, 87, .06);
  --vari-tumma-rgb:         29, 53, 87;  /* --vari-tumma R,G,B rgba()-taustoja varten (.hero-laatikko) */

  /* --- 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);
  --fonttikoko-h2: 2.5rem;
  --fonttikoko-h3: 1.1875rem;
  --otsikko-paino: 400;
  --riviheitto: 1.65;

  /* --- Mitat ja muodot --- */
  --sisallon-leveys: 1040px;
  --pyoristys: 16px;
  --lohkovali: 5.5rem;
}

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