/* ─── 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-ink: #0a0a0a;          /* otsikot */
  --s-ink-2: #454545;        /* leipäteksti — 9,1:1 */
  --s-ink-3: #6b6b6b;        /* pienet tekstit — 5,4:1 */
  --s-rule: rgba(0, 0, 0, 0.12);
  --s-rule-strong: rgba(0, 0, 0, 0.24);
  --s-wash: rgba(0, 0, 0, 0.045);   /* hover-pinta */

  --s-black: #000000;
  --s-on-black: #f5f5f5;
  --s-on-black-2: #b4b4b4;
  --s-on-black-3: #8c8c8c;
  --s-rule-dark: rgba(255, 255, 255, 0.14);

  /* 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;

  /* 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 */

  --s-lh-display: 1.02;
  --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;
  --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;

  /* ---- 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; }
}