/* ===========================================================================
 * JIIR — jaettu muotoilujarjestelma. YKSI lahde kaikille sivuille.
 *
 * Ennen tokenit olivat NELJASSA tiedostossa (index.html inline, kataloog.css,
 * site.css, legal.css) ja ne olivat jo eronneet toisistaan: sama kortti oli
 * yhdella sivulla 16px pyoristetty, toisella 20px. Nelja kopiota tarkoittaa,
 * etta jokainen muutos pitaa tehda nelja kertaa ja yksi jaa tekematta.
 *
 * Tama tiedosto ladataan JOKAISELLA sivulla ENSIMMAISENA, muut tyylitiedostot
 * vain taydentavat sita.
 *
 * MUOTOKIELI (2026-08): terava, ei pyorea. Napit ja kentat 8px, kortit 10px,
 * isot pinnat 14px. `--pill` (999px) on varattu vain asioille, jotka ovat
 * oikeasti ympyroita: avatarit, numeropallot, some-ikonit, tilapisteet.
 * Ikonit ovat viivaikoneita, eivat emojeita — ks. assets/icons.js.
 * ======================================================================== */

:root {
  /* --- Brandi. Varit ovat ennallaan. --- */
  --primary: #EA6A1E;
  --primary-dark: #B8500E;
  --primary-light: #FDECE0;
  --on-primary: #FFFFFF;
  --brand-50: #FEF6F1;
  --brand-100: #FDE3D2;
  --brand-200: #F9C3A0;
  --brand-300: #F49A67;
  --brand-400: #EF7F3C;
  --brand-500: #EA6A1E;
  --brand-600: #D25A16;
  --brand-700: #B8500E;
  --brand-800: #8C3D0B;
  --brand-900: #5E2907;
  --brand-a08: rgba(234, 106, 30, .08);
  --brand-a14: rgba(234, 106, 30, .14);
  --brand-a24: rgba(234, 106, 30, .24);

  /* --- Pinnat --- */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-alt: #F1F5F9;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  /* Tumma alatunniste ja tumma hero — omat tokenit, jotta ne pysyvat
     tummina myos vaalealla teemalla (kuten maketissa). */
  --ink: #16181C;
  --ink-2: #1E2126;
  --ink-border: #2C3037;
  --ink-text: #F2F4F7;
  --ink-muted: #9BA3AF;

  /* --- Teksti --- */
  --text: #0F172A;
  --text-muted: #5F6E86;
  --text-faint: #7A8699;

  /* --- Tilat --- */
  --success: #16A34A;
  --success-bg: #F0FDF4;
  --warning: #CA8A04;
  --danger: #DC2626;
  --gold: #CA8A04;
  --star: #F59E0B;

  /* --- Mitat --- */
  --maxw: 1180px;
  --gutter: 24px;

  /* --- Pyoristykset. Terava muotokieli: pienet arvot. --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --pill: 999px;
  /* Vanhat nimet osoittavat uusiin arvoihin, jotta olemassa olevat saannot
     terävöityvät ilman, etta jokaista riviä tarvitsee kayda lapi. */
  --radius-sm: var(--r-sm);
  --radius: var(--r);
  --radius-lg: var(--r-lg);

  /* --- Varjot. Matalat ja tiukat, ei leijuvia pilvia. --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px -12px rgba(15, 23, 42, .18), 0 2px 6px -3px rgba(15, 23, 42, .08);
  --shadow-lg: 0 20px 44px -20px rgba(15, 23, 42, .26), 0 6px 14px -8px rgba(15, 23, 42, .12);

  /* --- Kirjasin --- */
  /* Yksi perhe, ei kahta: Inter kantaa seka leipatekstin etta otsikot.
     Ladataan muuttuvana fonttina (opsz 14..32, wght 400..800), jolloin
     optinen koko sailyy: isot otsikot saavat tiiviimman piirron ja pieni
     teksti valjemman. Noto Color Emoji on jaljella vain kielivalitsimen
     lippuja varten. */
  --sans: "Inter", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);

  --ease: cubic-bezier(.2, .8, .3, 1);
  --t-fast: .14s;
  --t: .2s;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #EA6A1E;
    --primary-dark: #F7A470;
    --primary-light: #2A1608;
    --on-primary: #FFFFFF;
    --brand-a08: rgba(234, 106, 30, .12);
    --brand-a14: rgba(234, 106, 30, .20);
    --brand-a24: rgba(234, 106, 30, .32);

    --bg: #0A0C10;
    --surface: #14171D;
    --surface-alt: #1C2027;
    --border: #272C36;
    --border-strong: #39404D;

    --ink: #101215;
    --ink-2: #171A1F;
    --ink-border: #262A31;

    --text: #E6E9EE;
    --text-muted: #9AA5B1;
    --text-faint: #7E8896;

    --success: #4ADE80;
    --success-bg: #12321F;
    --warning: #E0B84C;
    --danger: #F87171;
    --gold: #E0B84C;
    --star: #F5A623;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 10px 26px -14px rgba(0, 0, 0, .75);
    --shadow-lg: 0 24px 50px -24px rgba(0, 0, 0, .85);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary: #EA6A1E;
  --primary-dark: #F7A470;
  --primary-light: #2A1608;
  --on-primary: #FFFFFF;
  --brand-a08: rgba(234, 106, 30, .12);
  --brand-a14: rgba(234, 106, 30, .20);
  --brand-a24: rgba(234, 106, 30, .32);

  --bg: #0A0C10;
  --surface: #14171D;
  --surface-alt: #1C2027;
  --border: #272C36;
  --border-strong: #39404D;

  --ink: #101215;
  --ink-2: #171A1F;
  --ink-border: #262A31;

  --text: #E6E9EE;
  --text-muted: #9AA5B1;
  --text-faint: #7E8896;

  --success: #4ADE80;
  --success-bg: #12321F;
  --warning: #E0B84C;
  --danger: #F87171;
  --gold: #E0B84C;
  --star: #F5A623;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 26px -14px rgba(0, 0, 0, .75);
  --shadow-lg: 0 24px 50px -24px rgba(0, 0, 0, .85);

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Perusta
 * ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }

/*
 * Pikad eesti/soome sõnad ei tohi jätta ritta üksikut tähte.
 *
 * `hyphens: auto` poolitab sõna sidekriipsuga (brauser kasutab lehe keele
 * sõnastikku — päis hoiab <html lang> keelevahetusega kaasas).
 * `hyphenate-limit-chars: 8 4 4` ütleb: poolita ainult vähemalt 8-tähelist
 * sõna ja jäta MÕLEMALE poole vähemalt neli tähte — nii ei saa tekkida rida,
 * mis algab või lõpeb ühe tähega. Kus poolitust ei ole (vana brauser, tundmatu
 * keel), murrab `overflow-wrap` sõna alles siis, kui ta muidu üle ääre läheks.
 */
body {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--brand-a24); color: var(--text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

@supports (scrollbar-color: auto) {
  :root { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--text); color: var(--bg);
  padding: 11px 18px; border-radius: var(--r-sm); font-weight: 700;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sivun leveysrajoitin. Kuuluu TANNE, ei jokaisen sivun omaan tyylilohkoon:
   ilman tata sisalto levisi koko ruudun levyiseksi heti, kun sivun oma
   .wrap-saanto katosi. `padding-inline`, ei lyhennetta — lyhenne nollaisi
   myos ala- ja ylapaddingin. */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------------------
 * Ikonit (assets/icons.js). Emojit korvattiin viivaikoneilla: emoji nayttaa
 * eri kaytto&shy;jarjestelmissa erilaiselta, on varillinen sarjakuva eika
 * skaalaudu tekstin mukana.
 * ------------------------------------------------------------------------ */
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.18em; }
.ico path, .ico circle, .ico rect, .ico line, .ico polyline, .ico polygon, .ico ellipse {
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico [fill="currentColor"] { fill: currentColor; stroke: none; }