/* ─── Perusta ─────────────────────────────────────────────────────────────
   Kaikki on rajattu .s-page-juureen. React-sovellus lataa tämän tiedoston
   samalla kun dashboard on käytössä, joten paljas elementtisääntö vuotaisi
   sinne saman tien. */

.s-page {
  margin: 0;
  background: var(--s-paper);
  color: var(--s-ink);
  font-family: var(--s-font);
  font-size: var(--s-fs-text);
  font-weight: var(--s-fw-regular);
  line-height: var(--s-lh-text);
  letter-spacing: var(--s-ls-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.s-page *,
.s-page *::before,
.s-page *::after { box-sizing: border-box; }

/* Elementtien oletukset nollataan, koska koko ja paino tulevat aina
   tyyppiluokasta (.s-display, .s-title, ...) eikä tagista. Näin sama otsikko
   näyttää samalta riippumatta siitä onko se h1 vai h2. :where() pitää
   spesifisyyden nollassa, jolloin jokainen luokka voittaa tämän. */
.s-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
  font: inherit;
  color: inherit;
}

.s-page :where(ul, ol) { padding: 0; list-style: none; }
.s-page :where(img, svg) { display: block; max-width: 100%; }
.s-page :where(a) { color: inherit; text-decoration: none; }
.s-page :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.s-page :where(input, textarea, select) { font: inherit; }
.s-page :where(a, button) { touch-action: manipulation; }

.s-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--s-radius-sm);
}

.s-skip {
  position: absolute;
  left: var(--s-5);
  top: var(--s-5);
  z-index: 50;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--s-radius-sm);
  background: var(--s-ink);
  color: var(--s-paper);
  font-size: var(--s-fs-ui);
  transform: translateY(-200%);
}

.s-skip:focus-visible { transform: none; }

/* ─── Typografia ──────────────────────────────────────────────────────────
   Kuusi roolia, ei enempää. Jokainen teksti sivulla on jokin näistä. */

.s-display {
  font-size: var(--s-fs-display);
  line-height: var(--s-lh-display);
  letter-spacing: var(--s-ls-display);
  font-weight: var(--s-fw-semibold);
  color: var(--s-ink);
  text-wrap: balance;
}

.s-title {
  font-size: var(--s-fs-title);
  line-height: var(--s-lh-title);
  letter-spacing: var(--s-ls-title);
  font-weight: var(--s-fw-semibold);
  color: var(--s-ink);
  text-wrap: balance;
}

.s-subtitle {
  font-size: var(--s-fs-subtitle);
  line-height: 1.25;
  letter-spacing: var(--s-ls-subtitle);
  font-weight: var(--s-fw-semibold);
  color: var(--s-ink);
}

.s-lead {
  max-width: var(--s-measure-lead);
  font-size: var(--s-fs-lead);
  line-height: var(--s-lh-lead);
  letter-spacing: var(--s-ls-lead);
  color: var(--s-ink-2);
}

.s-text {
  max-width: var(--s-measure-text);
  font-size: var(--s-fs-text);
  line-height: var(--s-lh-text);
  color: var(--s-ink-2);
}

.s-label {
  font-size: var(--s-fs-label);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--s-ink-3);
}

/* Tumma pinta: teksti bloomaa mustalla, joten sama asetus lukee tiiviimpänä.
   Hieman löysempi riviväli ja vähemmän negatiivista trackingia tasaa sen. */
.s-dark .s-display,
.s-dark .s-title,
.s-dark .s-subtitle { color: var(--s-on-black); }
.s-dark .s-lead,
.s-dark .s-text { color: var(--s-on-black-2); }
.s-dark .s-label { color: var(--s-on-black-3); }
.s-dark .s-lead { line-height: 1.55; letter-spacing: -0.006em; }
.s-dark .s-text { line-height: 1.66; letter-spacing: 0.003em; }