/* =====================================================================
   HILLA IT · TEEMATIEDOSTO (design-tokenit)
   =====================================================================
   Sivuston AINOA paikka, jossa värit, fontit ja mitat määritellään.
   Komponenttityylit (tyyli.css) käyttävät vain näitä muuttujia.

   Lähde: HillaIT-logo-v2804.pdf (28.4.2026). Värit poimittu logosta
   ohjelmallisesti — sanamerkki #231F20, marjan gradientti
   #EF5B21 → #F7941E → #FDC15A.

   HUOM brändioranssista: puhdas #F7941E ei yllä valkoisella 4,5:1
   tekstikontrastiin (2,28:1) eikä 3:1 UI-rajaan. Siksi oranssia
   käytetään vain KORISTEENA (marja, ikoniympyrät, gradientit), ja
   teksti/napit käyttävät tummempaa --vari-korostus (#C2410C, 5,18:1).
   Älä käytä --vari-korostus-2:ta tekstiin tai rajaviivaan.

   Kaikki alla olevat parit on tarkistettu laskennallisesti 14.8.2026
   (WCAG AA: 4,5:1 leipäteksti, 3:1 suuri teksti ja UI).
   ===================================================================== */

:root {
  /* --- Brändivärit (logosta) --- */
  --vari-tumma:      #231F20;  /* sanamerkin musta: pääteksti, footer, tummat osiot */
  --vari-korostus:   #C2410C;  /* napit ja linkit — valkoisella 5,18:1, valkoinen teksti päällä 5,18:1 */
  --vari-korostus-2: #F7941E;  /* brändioranssi: VAIN koristeena (ikoniympyrä, gradientti) */
  --vari-vaalea:     #FDF2E7;  /* vaaleat taustalohkot ja kortit */
  --vari-tausta:     #FFFFFF;  /* sivun perustausta */
  --vari-hero:       #FFF4E9;  /* heron lämmin tausta */

  /* Marjan gradientti — käytössä logossa ja koristeissa */
  --gradientti-marja: linear-gradient(35deg, #EF5B21 0%, #F7941E 50%, #FDC15A 100%);

  /* --- Johdetut värit --- */
  --vari-tumma-rgb:         35, 31, 32;   /* läpikuultaviin taustoihin: rgba(var(--vari-tumma-rgb), .75) */
  --vari-teksti:            var(--vari-tumma);
  --vari-teksti-himmea:     #5A5254;  /* leipäteksti korteissa — valkoisella 7,58:1, vaalealla 6,87:1 */
  --vari-teksti-tummalla:   #FFFFFF;  /* teksti tummalla taustalla — 16,3:1 */
  --vari-linkki-tummalla:   #FDC15A;  /* linkit tummalla taustalla — 10,05:1 */
  --vari-korostus-hover:    #9A3412;  /* napin hover — valkoinen teksti 7,31:1 */
  --vari-korostus-2-tumma:  #C2410C;  /* oranssi tekstinä: sama kuin korostus, koska kirkas oranssi ei yllä AA:han */
  --vari-reuna:             #F0DCC6;  /* yläpalkin ja erottimien viiva — KORISTE, ei UI-raja */
  --vari-reuna-kentta:      #8C7E73;  /* lomakekenttien reuna — valkoisella 3,93:1, vaalealla 3,56:1.
                                         WCAG 1.4.11 vaatii UI-komponentin rajalta 3:1, eikä vaalea
                                         --vari-reuna (1,33:1) riitä siihen. */
  --vari-varjo:             rgba(35, 31, 32, .07);
  --vari-hover-pinta:       rgba(194, 65, 12, .08);

  /* --- Typografia --- */
  /* Vain Karla (self-hosted, 2 leikkausta). Ei erillistä otsikkofonttia:
     B2B-ilme ei kaipaa serifiä, ja yksi fonttiperhe = kaksi latausta
     vähemmän. Otsikot erottuvat painolla ja tiukalla kirjainvälillä. */
  --fontti:         Karla, system-ui, -apple-system, sans-serif;
  --fontti-otsikko: var(--fontti);
  --fonttikoko-perus: 1.125rem;
  --fonttikoko-h1: clamp(2.4rem, 5vw, 3.4rem);
  --fonttikoko-h2: clamp(1.9rem, 3.4vw, 2.4rem);
  --fonttikoko-h3: 1.3125rem;
  --otsikko-paino: 700;
  --riviheitto: 1.65;

  /* --- Mitat ja muodot --- */
  --sisallon-leveys: 1080px;
  --pyoristys: 14px;
  --lohkovali: 5rem;
}

/* Otsikot tiiviimmällä kirjainvälillä — sans-otsikot tarvitsevat sen */
h1, h2, h3 { letter-spacing: -.02em; }

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