@charset "UTF-8";
/* ==========================================================================
   La-Sorila — tokens.css

   Vain muuttujat. Erillinen tiedosto siksi, että tokeneita tarvitaan
   kolmessa paikassa:

     1. Julkinen sivu          — app.css:n riippuvuutena
     2. Lohkoeditorin kangas   — add_editor_style()
     3. Hallintapaneelin UI    — värilaput sivupalkissa piirtyvät
                                 iframen ULKOPUOLELLA, eivätkä näe
                                 kankaan tyylejä

   Ilman kohtaa 3 theme.json:in paletti näyttää kuudelta samanväriseltä
   lapulta, koska var(--paperi) on määrittelemätön.

   Tämä on ainoa poikkeus sääntöön "yksi CSS-tiedosto". Perusteltu:
   tiedosto ei sisällä yhtään sääntöä, vain arvoja.
   ========================================================================== */


/* ==========================================================================
   01 — Tokenit
   ========================================================================== */

:root {
	/* Mitat — samat molemmissa kausissa */
	--sisalto:      68rem;
	--leveahko:     78rem;                      /* välileveys: tunnelmaosio */
	--leve:         84rem;
	--reuna:        clamp(1.25rem, 5vw, 3rem);
	--pysty-s:      clamp(2rem, 4vw, 3rem);
	--pysty-m:      clamp(3.5rem, 7vw, 6rem);
	--pysty-l:      clamp(5rem, 10vw, 9rem);
	--vali:         clamp(1.5rem, 4vw, 3rem);   /* gridin väli */

	/* Typografia */
	--f-otsikko:    "Fraunces", Georgia, serif;
	--f-leipa:      "Karla", system-ui, sans-serif;
	--k-xs:         0.75rem;
	--k-s:          0.875rem;
	--k-m:          1rem;
	--k-ml:         1.125rem;                  /* väliporras: rivit, kortit */
	--k-l:          clamp(1.5rem, 3.5vw, 2.25rem);
	--k-xl:         clamp(2rem, 6vw, 3.25rem);
	--rivi-leipa:   1.75;
	--rivi-otsikko: 1.15;
	--mitta:        58ch;

	/* Muoto ja liike */
	--otsa-korkeus: 4rem;                       /* otsikkorivin vähimmäiskorkeus */
	--pyoristys:    5px;                        /* pehmeä, ei pyöreä */
	--pyoristys-s:  3px;                        /* lomakekentät, pienet pinnat */
	--siirtyma:     320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kesä */
:root[data-season="kesa"] {
	--paperi:          #EFEBE7;
	--lohko:           #D9E3E7;
	--lohko-syva:      #B9CBD2;
	--teksti:          #2E3A3E;
	--hiljainen:       #55636A;
	--viiva:           #B4BFC4;
	--aksentti:        #A98A5E;
	--aksentti-teksti: #7A5E36;   /* ks. huomautus kontrastista alla */
	--peite:           rgb(46 58 62 / 0.34);
	color-scheme: light;
}

/* Talvi */
:root[data-season="talvi"] {
	--paperi:          #252220;
	--lohko:           #3E3833;
	--lohko-syva:      #2E2A26;
	--teksti:          #EDE4D6;
	--hiljainen:       #B3A492;
	--viiva:           #6B6055;
	--aksentti:        #C4A97A;
	--aksentti-teksti: #C4A97A;   /* tummalla pohjalla aksentti riittää */
	--peite:           rgb(21 19 17 / 0.46);
	color-scheme: dark;
}

/* Turvaverkko: jos data-season puuttuu (esikatselu, editori, virhetila),
   käytetään kesäpalettia. Sama arvo kuin lasorila_kausi():n oletus. */
:root:not([data-season]) {
	--paperi:          #EFEBE7;
	--lohko:           #D9E3E7;
	--lohko-syva:      #B9CBD2;
	--teksti:          #2E3A3E;
	--hiljainen:       #55636A;
	--viiva:           #B4BFC4;
	--aksentti:        #A98A5E;
	--aksentti-teksti: #7A5E36;
	--peite:           rgb(46 58 62 / 0.34);
}

/* --------------------------------------------------------------------------
   Kontrastin käyttösäännöt (mitattu, WCAG AA = 4.5:1 pienelle tekstille)

   --hiljainen   paperia vasten   kesä 5.3:1  ✓   talvi 6.5:1  ✓
   --hiljainen   lohkoa vasten    kesä 4.8:1  ✓   talvi 5.3:1  ✓
   --hiljainen   syvää vasten     kesä 3.8:1  ✗   talvi 5.9:1  ✓
       → SÄÄNTÖ: hiljainen käy paperilla ja lohkolla molemmissa
         kausissa. --lohko-syva on syvin pinta: siinä toissijainen
         teksti on --teksti, ja ero tehdään typografialla eikä värillä.
         Arvot tummennettiin (kesä #5C6B72, talvi #A29483), jotta
         sinistä voi käyttää sivun perusrytminä eikä vain aksenttina.

   --aksentti    paperia vasten   kesä 2.8:1  ✗   talvi 7.0:1  ✓
       → SÄÄNTÖ: --aksentti on graafinen väri (viivat, reunat, ikonit).
         Tekstiin käytetään --aksentti-teksti, joka on kesällä tummennettu
         (5.1:1 paperilla, 4.6:1 lohkolla). Talvella arvot ovat samat.

   Mittaa uudelleen, jos paletti muuttuu. Ulkona kirkkaassa valossa
   tehtävä testi on silti se, joka ratkaisee.
   -------------------------------------------------------------------------- */