/* ─── Tokenit ─────────────────────────────────────────────────────────────
   Julkisten sivujen ainoa arvojen lähde: värit, typografia, välit, kulmat.
   Mikään muu tiedosto ei kirjoita lukuja, jos jokin arvo toistuu, se kuuluu
   tänne. Näin sama väli on sama väli joka sivulla.

   Nimet alkavat --s-, luokat s-. Etuliite on tarpeen koska React-sovellus
   lataa nämä samalla kun dashboardin oma CSS on voimassa, ja siellä on jo
   --text-*, --space-*, .btn ja .card. */

:root {
  /* ---- Väri ------------------------------------------------------------
     Musta ja valkoinen. Toissijainen teksti on samaa mustaa matalammalla
     arvolla, ei oma harmaa sävynsä: brändivärin lisääminen myöhemmin koskee
     kahta tokenia eikä koko tiedostoa. */
  --s-paper: #ffffff;
  --s-surface: #f7f7f8;      /* kuvituspinnat ja paneelit valkoisella */
  --s-ink: #0b0b0e;          /* otsikot */
  --s-ink-2: #46464d;        /* leipäteksti, 9,4:1 */
  --s-ink-3: #6c6c74;        /* pienet tekstit, 5,2:1 */
  --s-rule: rgba(12, 12, 20, 0.09);
  --s-rule-strong: rgba(12, 12, 20, 0.2);
  --s-wash: rgba(12, 12, 20, 0.045);   /* hover-pinta */

  /* Tumma toissijainen pinta. Ei puhdasta mustaa: #09090b on hiukan viileä, jolloin
     sen päällä olevat paneelit (#111114) erottuvat ilman reunaviivaa. */
  --s-black: #09090b;
  --s-black-2: #111114;
  --s-black-3: #18181c;
  --s-on-black: #f4f4f5;
  --s-on-black-2: #a8a8b0;
  --s-on-black-3: #7c7c85;
  --s-rule-dark: rgba(255, 255, 255, 0.09);
  --s-rule-dark-strong: rgba(255, 255, 255, 0.18);

  /* Aksentti. Sama pinkki kuin ikoneissa, mutta tekstin ja pienten merkkien
     käyttöön: tilapiste, valittu aika, fokus. Ei koskaan isoja pintoja. */
  --s-accent: #f0468a;
  --s-accent-soft: rgba(240, 70, 138, 0.12);

  /* Ikonipinkki. Sivun ainoa väri ja se kuuluu yhdelle elementtityypille:
     ikonimerkeille. Neljä askelta käytetään kolmena liukuparina, jolloin
     merkin etutaso on aina kirkkain ja takataso syvin, se tekee joukosta
     yhtenäisen. Ramppi päättyy kylläiseen eikä tummaan: syvemmät sävyt
     luettiin viininpunaisiksi ja tekivät isopintaisista merkeistä möhkäleitä. */
  --s-pink-100: #ffa6c4;
  --s-pink-200: #ff7aae;
  --s-pink-250: #fc629f;  /* väliaskel suurten vierekkäisten pintojen eroon */
  --s-pink-300: #f94a90;
  --s-pink-400: #d4176a;

  /* ---- Typografia ------------------------------------------------------
     Koot ovat yksi jatkuva clamp mobiilista työpöytään, ei breakpoint-
     ohituksia: juuri ne pääsivät aiemmin eri tahtiin eri sivuilla. Kaava on
     suora kahden mittapisteen läpi, joten välissä ei ole hyppyjä. */
  --s-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  /* Tasalevyinen vain metatiedolle: vaiheen numero, kellonaika, osoite. Se on se
     pieni tekninen sävy, ei otsikkofontti. */
  --s-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Hieman isompi kuin osion otsikko, muttei irrallaan siitä: 390px:llä 32px
     vs otsikon 28px eli 1,14x. Yläraja tulee siitä että "Kuinka valita sopiva"
     on mahduttava yhdelle riville, 32px:llä rivi on ~320px 342px:n palstalla,
     eli tilaa jää mutta ei paljon. Työpöydällä 1440px -> 56px. */
  --s-fs-display: clamp(1.875rem, calc(1.443rem + 2.286vw), 3.75rem);
  /* Työpöydällä sama suhde näyttökokoon kuin ennen (1:1,62). Mobiilissa
     kurotaan lähemmäs: jos h2 seuraisi samaa suhdetta, se putoaisi
     leipätekstin tasolle. 390px -> 28px eli 1,65x leipäteksti. */
  --s-fs-title: clamp(1.5rem, calc(1.62rem + 0.533vw), 2.375rem);
  --s-fs-subtitle: 1.5rem;                            /* 24px */
  --s-fs-lead: clamp(1.0625rem, 1.25vw, 1.25rem);     /* 17 -> 20px */
  --s-fs-text: 1.0625rem;                             /* 17px */
  --s-fs-ui: 0.9375rem;                               /* 15px, navi, napit */
  --s-fs-label: 0.8125rem;                            /* 13px */

  /* Rivivali seuraa kirjasinkokoa, ei ole vakiokerroin. Iso otsikko kestää
     tiukan rivivalin, pieni ei. SF Pron sisältöalue on 1,178 em (ascent 1980 +
     descent 432 / 2048 unitsPerEm), joten kerroin 1,02 jättää rivilaatikon
     kirjasinta itseään pienemmäksi. Suomessa se tuntuu heti, koska ä ja ö
     nostavat mustetta 0,69 em:iin ja g laskee -0,18 em:iin: 32px:n otsikossa
     umlautin ja edellisen rivin alapidennyksen väliin jäi vain 4,8px.

     Kaava antaa 32px:llä 36,5px (1,14) ja 56px:llä 57,1px (1,02), jolloin
     musteen väliin jää joka koossa ~8,5px, sama optinen väljyys. */
  --s-lh-display: calc(0.858 * var(--s-fs-display) + 0.5625rem);
  --s-lh-title: 1.1;
  --s-lh-lead: 1.5;
  --s-lh-text: 1.6;

  --s-ls-display: -0.042em;
  --s-ls-title: -0.03em;
  --s-ls-subtitle: -0.018em;
  --s-ls-lead: -0.012em;
  --s-ls-ui: -0.008em;

  --s-fw-regular: 400;
  --s-fw-medium: 500;
  --s-fw-semibold: 600;

  /* Rivin pituus pidetään näissä, ei säiliöiden max-widthissä. */
  --s-measure-lead: 46ch;
  /* Otsikkolohkon mitta. Merkkiyksikkö ratkeaa lohkon omasta koosta (leipäteksti), ei
     otsikon, joten arvo on sama riippumatta siitä kuinka suureksi otsikko kasvaa. */
  --s-measure-head: 72ch;
  --s-measure-text: 68ch;
  --s-measure-center: 58ch;   /* keskitetty palsta sietää leveämmän mitan */

  /* ---- Välit -----------------------------------------------------------
     Yksi askelma kaikkeen. Osion ylä- ja alaväli on sama, joten kahden osion
     väliin jää aina tasan 2 x --s-section-y. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --s-section-y: clamp(72px, 7vw, 108px);
  --s-section-y-tight: clamp(56px, 5.5vw, 88px);
  --s-head-gap: clamp(48px, 6vw, 88px);   /* osion otsikon ja sisällön väli */
  --s-stack-gap: var(--s-5);

  /* Sivun ainoa vaakakehys: 6 % kummallakin puolella on ~86px 1440px:llä ja
     ~154px 2560px:llä, eli reuna pysyy suhteessa samana joka leveydellä. */
  --s-gutter: 6%;

  --s-header-h: 72px;

  /* ---- Muoto -----------------------------------------------------------*/
  --s-radius-sm: 8px;
  --s-radius: 12px;
  --s-radius-lg: 20px;
  --s-radius-xl: 28px;

  --s-shadow-card: 0 1px 2px rgba(12, 12, 20, 0.04), 0 8px 24px rgba(12, 12, 20, 0.06);
  --s-shadow-float: 0 1px 2px rgba(12, 12, 20, 0.06), 0 24px 64px rgba(12, 12, 20, 0.14);

  /* ---- Liike -----------------------------------------------------------*/
  --s-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --s-dur-fast: 140ms;
  --s-dur: 260ms;
}

@media (max-width: 600px) {
  :root { --s-gutter: 24px; }
}

@media (max-width: 380px) {
  :root { --s-gutter: 16px; }
}