/* Lempäälän Varaosat: suunnittelutokenit.
   Arvot jotka odottavat suunnan valintaa on merkitty VALINTA-kommentilla.
   Ne vaihdetaan kun merkkisuunta on valittu, eikä muualle kirjoiteta
   kovakoodattuja värejä tai fonttinimiä. */

@font-face {
  font-family: "Display";
  src: url("../../fonts/NationalPark-Bold.ttf?v=1") format("truetype");  /* National Park Bold */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Leipa";
  src: url("../../fonts/WorkSans-Regular.ttf?v=1") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Rekisteröity muuttuja: ilman @property selain kohtelee arvoa
   merkkijonona eikä se interpoloidu, jolloin hehku hyppäisi portaittain
   sen sijaan että hengittäisi. */
@property --pian-hehku {
  syntax: "<length>";
  inherits: false;
  initial-value: 26px;
}

:root {
  /* Pinnat. Ländäri on tumma, koska tunnelmakuva on hämärä hyllyrivi. */
  --pinta: #14171a;
  --pinta-syva: #0d0f11;
  --pinta-vaalea: #f4f2ec;

  /* Muste */
  --musta: #171a1c;
  --teksti: #f2efe8;
  --teksti-himmea: #a8a49b;
  --teksti-hiljainen: #7d7a73;
  --teksti-lasilla: #d0cdc6;

  /* Aksentti: tasan yksi sävy, mutta se taittaa. Sähkönsininen joka saa
     valon kulkea lävitseen, ei litteä väripinta.

     Andy 2026-09-04: edellinen #458CAD oli liian harmaa ja litteä.
     Kylläisyys nostettiin ja sävyyn tuotiin taite, jotta se lukee
     metallin ja valon tapaan eikä yhtenä täyttövärinä.

     Mitatut kontrastit pohjaa #0d0f11 vasten:
       --aksentti        #4FA8E8   7,41:1
       taitteen tummin   #2E82CC   4,66:1  (lattia on 4,5, ei alitusta)
       taitteen kirkkain #7FD4FF  11,67:1
     Napin tumma teksti #04121e saa gradientin tummimmallakin
     sävyllä #3D9BE0 kontrastin 6,27:1. */
  --aksentti: #4FA8E8;
  --aksentti-hiljainen: #1D3A48;
  --aksentti-tumma: #2E82CC;
  --aksentti-kirkas: #7FD4FF;
  --aksentti-huippu: #BFF0FF;

  /* Taite: sama väri viidessä syvyydessä. Kulma on sama kuin taustakuvan
     valonsäteen suunta, joten teksti ja kuva taittavat valoa samaan
     suuntaan.

     Andy 2026-09-04, toinen kierros: sävyeron piti olla selkeämpi ja
     vahvempi. Huippu nostettiin #7FD4FF:stä #BFF0FF:ään ja siirtymä
     tehtiin jyrkemmäksi, jolloin luminanssiero kasvoi 2,81-kertaisesta
     3,86-kertaiseksi. Tummin sävy ei liikkunut, koska se on kiinni
     kontrastilattiassa: #2E82CC antaa 4,74:1 ja lattia on 4,5. */
  --aksentti-taite: linear-gradient(
    100deg,
    var(--aksentti-tumma) 0%,
    #3D9BE0 17%,
    var(--aksentti-kirkas) 38%,
    var(--aksentti-huippu) 50%,
    #5FBEF5 64%,
    var(--aksentti) 82%,
    var(--aksentti-tumma) 100%
  );

  /* Viivat ja pinnat kuvan päällä */
  --viiva: rgba(242, 239, 232, 0.14);
  --viiva-vahva: rgba(242, 239, 232, 0.26);
  --lasi: rgba(16, 19, 22, 0.55);
  --lasi-vahva: rgba(13, 15, 17, 0.74);

  /* Typografia */
  --fontti-display: "Display", "Arial Narrow", Impact, sans-serif;
  --fontti-leipa: "Leipa", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --koko-h1: clamp(2.15rem, 1.35rem + 3.25vw, 4.25rem);
  --koko-ingressi: clamp(0.98rem, 0.92rem + 0.36vw, 1.16rem);
  --koko-nappi: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  --koko-pieni: clamp(0.72rem, 0.7rem + 0.12vw, 0.8rem);
  --koko-mikro: 0.66rem;

  --valistys-otsikko: -0.02em;
  --valistys-label: 0.14em;
  --rivivali-otsikko: 1.04;  /* ei tiukempaa: Ä ja Ö nousevat versaalikorkeuden yli */
  --rivivali-leipa: 1.6;

  /* Mitat */
  --reuna: clamp(1.1rem, 0.6rem + 2.2vw, 3.4rem);
  --pysty: clamp(0.9rem, 0.5rem + 1.6vw, 2rem);
  --rako: clamp(1rem, 0.6rem + 1.6vw, 2.6rem);
  --sade: 3px;
  --sade-pinta: 6px;

  /* Liike. Motion-taso 2: liike selventää hierarkiaa eikä esiinny itse. */
  --kesto-nopea: 180ms;
  --kesto-perus: 260ms;
  --pehmennys: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kesto-nopea: 1ms;
    --kesto-perus: 1ms;
  }
}