/* ==========================================================================
   FormulaRs: design-tokenit. AINOA väriarvojen koti (DESIGN.md, portti P2).
   Sävyvahti: vaaleiden pintojen HSL-sävy pidetään alueella 195-198, jolloin
   sävy on viileä posliini muttei portin kieltämällä sinialueella 200-250.
   ========================================================================== */

:root {
  /* --- Väriroolit (DESIGN.md) --- */
  /* Pohja: viileä posliininvalkoinen, kirkas halli */
  --vari-pohja: #F4F7F8;
  /* Pinta: hitusen kylmempi taso, osioiden erottelu valon lämpötilalla */
  --vari-pinta: #EDF2F4;
  /* Syvä valo: kalpea teräs */
  --vari-syva-valo: #E2E9EC;
  /* Hiusviiva: terävä raja, ei reunusta reunuksen sisällä */
  --vari-hiusviiva: #D9E0E3;
  /* Muste: syvä grafiitti, täysi kontrasti, leipätekstiä ei harmaanneta */
  --vari-muste: #16181C;
  /* Syvä pinta: ainoan tumman osion tausta (hinta) */
  --vari-syva-pinta: #1A1D22;
  /* Vaalea teksti tummalla pinnalla */
  --vari-valo-teksti: #F2F5F6;
  /* Signaali: opetusajoneuvon kolmion punainen. Vain CTA, aktiivitila, kolmio */
  --vari-signaali: #C4261D;
  --vari-signaali-tumma: #A81F17;

  /* Läpinäkyvät apuarvot: valokiila ja tumman osion hiusviiva.
     rgba elää vain täällä; styles.css ja sections.css viittaavat tokeneihin. */
  --vari-valo-0: rgba(255, 255, 255, 0);
  --vari-valo-45: rgba(255, 255, 255, 0.45);
  --vari-valo-75: rgba(255, 255, 255, 0.75);
  --vari-hiusviiva-tumma: rgba(242, 245, 246, 0.16);
  --vari-muste-huntu: rgba(22, 24, 28, 0.55);
  --vari-pohja-lasi: rgba(244, 247, 248, 0.86);
  --vari-pinta-lasi: rgba(237, 242, 244, 0.78);
  --vari-signaali-huntu: rgba(196, 38, 29, 0.08);
  --vari-sumu-viilea: rgba(140, 226, 214, 0.11);
  --vari-sumu-lampo: rgba(255, 206, 132, 0.12);

  /* --- Lasi ja särö: pinnan rikkominen ilman glassmorphismia ---
     Andyn linjaus 2026-08-31: valkoinen teema säilyy, mutta pintaa rikotaan
     lasimaisuudella ja eleganteilla säröillä, jottei synny mustavalkoista
     tunnetta. Fasettien sävy pysyy sävyvahdin alueella 195-198; taittovärit
     ovat TARKOITUKSELLINEN poikkeus ja ne esiintyvät VAIN hiusviivan
     reunassa, ei koskaan pintana. Se on koko värin syy: lasin taitto. */
  --vari-faset-kirkas: #F3F8FA;
  --vari-faset-vaimea: #E7ECEE;
  --vari-lasi-viiva: #C8CDCF;
  --vari-lasi-kirkas: rgba(255, 255, 255, 0.9);
  --vari-taitto-lampo: rgba(255, 206, 132, 0.42);
  --vari-taitto-viilea: rgba(140, 226, 214, 0.34);

  /* --- Laatikkovarjot: TASAN kaksi tokenia (portti P2 laskee) --- */
  /* Sisältöpinta: leveä, pehmeä, matala */
  --varjo-pinta: 0 24px 48px -28px rgba(22, 24, 28, 0.22);
  /* Kelluva käyttöliittymä: mobiilivalikko ja soittopalkki */
  --varjo-kelluva: 0 -10px 32px -14px rgba(22, 24, 28, 0.30);

  /* --- Muoto: säde valitaan pinnan roolin mukaan --- */
  --sade-pinta: 14px;
  --sade-kuva: 10px;
  --sade-nappi: 8px;

  /* --- Typografia: Chivo, kokoluokka on display --- */
  --fontti-paa: "Chivo", system-ui, sans-serif;
  --fontti-mono: "Chivo Mono", ui-monospace, monospace;
  --koko-display: clamp(2.3rem, 0.95rem + 2.6vw, 3.6rem);
  --koko-h2: clamp(1.75rem, 1.15rem + 1.9vw, 2.7rem);
  --koko-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --koko-leipa: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --koko-iso-leipa: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --koko-pieni: 0.875rem;
  --koko-mono: 0.8125rem;
  --koko-hinta: clamp(2.6rem, 1.4rem + 3.6vw, 4.6rem);
  --koko-logo: clamp(1.3rem, 1.2rem + 0.25vw, 1.5rem);

  /* --- Rytmi: clamp-arvot, tiiviimmät mobiilissa --- */
  --space-section: clamp(4.25rem, 3rem + 5vw, 8rem);
  --space-section-compact: clamp(3rem, 2.25rem + 3vw, 5rem);
  --tila-1: 0.5rem;
  --tila-2: 1rem;
  --tila-3: 1.5rem;
  --tila-4: 2.5rem;
  --tila-5: 4rem;
  --sisalto-leveys: 88rem;
  --teksti-mitta: 38rem;
  --ylatunniste-korkeus: 5rem;
  --ylatunniste-korkeus-tiivis: 4.25rem;

  /* --- Hero: kuvapalstan rakenteellinen skaalauslukko (kuvitus.md 17.2) --- */
  --hero-kuva-max: 3072px;
  --hero-naytto-max: 2603px;
  /* Näyttämön korkeus: ensimmäinen ruutu on kuva, ei tyhjää. Ylätunnisteen
     korkeus vähennetään, jotta hero täyttää tasan ensiruudun eikä jätä
     valkoista kaistaa alalaitaan. svh eikä vh, koska mobiiliselaimen
     osoitepalkki ei saa leikata CTA:ta. */
  --hero-korkeus: clamp(30rem, calc(100svh - var(--ylatunniste-korkeus)), 58rem);

  /* --- Liike: ajoitus ja easing tokeneina (DESIGN.md, motion-sopimus) --- */
  --liike-nopea: 160ms;
  --liike-perus: 420ms;
  --liike-hidas: 720ms;
  --liike-hero-henkays: 14s;
  --easing-ulos: cubic-bezier(0.22, 0.61, 0.21, 1);
  --easing-sisaan: cubic-bezier(0.55, 0.06, 0.68, 0.19);

  /* --- Kelluva soittopalkki --- */
  --soittopalkki-korkeus: 4rem;

  /* --- Viilto: kulmavakio 35 astetta, geometria kolmiosta --- */
  --viilto-kulma: 35deg;
}