/* ==========================================================================
   base.css — reset, tüpograafia, fookus, ligipääsetavuse abiklassid
   Ühtegi hex-värvi siin ei ole. Ainult var(--silva-*).
   ========================================================================== */

/* Inter Variable — self-hosted, üks fail kannab kõiki kaale (§7.2: mitte Google Fonts CDN) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
  /* latin + latin-ext — Läti (ā ē ī ū ļ ņ ķ ģ š ž) ja Eesti (õ ä ö ü š ž) tähed */
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* 1.4.12 — ära kasuta fikseeritud kõrgusi teksti ümber.
   Pealkirjad kannavad oma reavahet, aga mitte kõrguslukku. */
h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-tight);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }

/* Lingid: allakriipsutus on kohustuslik jooksvas tekstis (1.4.1 — värv ei ole
   ainus vahend). Navigatsiooni- ja nupulingid tühistavad selle ise. */
a {
  color: var(--accent-text);
  text-underline-offset: 0.2em;
  text-decoration-thickness: max(1px, 0.06em);
}
a:hover { text-decoration-thickness: max(2px, 0.1em); }

img, svg, video { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
li { margin-bottom: var(--sp-2); }

hr {
  border: 0;
  border-top: 1px solid var(--silva-border-soft);   /* dekoratiivne — lubatud */
  margin: var(--sp-12) 0;
}

/* --------------------------------------------------------------------------
   Fookus (2.4.11 + 1.4.11) — värv VAHETUB pinnaga, ei ole konstantne.
   Kollane fookusrõngas valgel taustal on keelatud (1,18:1).
   -------------------------------------------------------------------------- */
:focus { outline: none; }

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

.on-dark :focus-visible,
.silva-section--dark :focus-visible {
  outline-color: var(--silva-focus-dark);
}

/* --------------------------------------------------------------------------
   Skip-link — esimene fokuseeritav element lehel (§8)
   -------------------------------------------------------------------------- */
.silva-skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  padding: var(--sp-3) var(--sp-4);
  background: var(--silva-green-900);
  color: var(--silva-white);          /* 11,78 */
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top 120ms ease;
}
.silva-skip-link:focus-visible { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   Ligipääsetavuse abiklassid
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus-visible {
  position: static !important;
  width: auto; height: auto;
  clip-path: none;
  margin: 0; padding: var(--sp-2);
}

/* Läbiv suurtäht ALATI CSS-iga, mitte suurtähtedes lähtetekstis (§5 reegel 4) */
.silva-eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  color: var(--text-2);
}
.silva-section--dark .silva-eyebrow { color: var(--silva-yellow); }  /* 9,97 */

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.silva-wrap {
  width: min(100% - var(--sp-8), var(--wrap));
  margin-inline: auto;
}
.silva-wrap--narrow { max-width: var(--wrap-narrow); }
.silva-wrap--content { max-width: var(--wrap-content); }

.silva-section { padding-block: var(--sp-24); }

/* Kahe samavärvilise (valge) sektsiooni vahel ei ole tausta katkestust,
   mis õigustaks kahekordset (96+96px) vahet — see loeb tühjana, mitte
   rahuliku ruumina. Kasutusel ainult siis, kui eelmine sektsioon on ka
   lihtne .silva-section, ilma --surface/--dark taustata. */
.silva-section--tight-top { padding-top: var(--sp-8); }

.silva-section--surface { background: var(--surface-raised); }

/* Tumedad kontekstid. .silva-hero EI OLE .silva-section--dark, aga tema
   taust on sama tumeroheline — seega peab ta samu tekstivärve kandma.
   Ühine selektor on ainus viis, kuidas kumbki kontekst ei saa maha jääda. */
.silva-section--dark,
.silva-hero {
  --text-on-surface:  var(--silva-white);        /* 11,78 vs #134021 */
  --text-2-on-surface: var(--silva-green-100);   /* 9,28 */
  --link-on-surface:  var(--silva-yellow);       /* 9,97 */
}

.silva-section--dark {
  background: var(--silva-green-900);
  color: var(--text-on-surface);
}
.silva-section--dark h1,
.silva-section--dark h2,
.silva-section--dark h3,
.silva-hero h1, .silva-hero h2, .silva-hero h3 { color: var(--text-on-surface); }

.silva-section--dark p,
.silva-hero p { color: var(--text-2-on-surface); }

/* :not(.silva-btn) on kohustuslik — muidu võidab see selektor
   spetsiifikuselt nupu enda värvi ja kollane nupp saab kollase teksti (1:1). */
.silva-section--dark a:not(.silva-btn),
.silva-hero a:not(.silva-btn) { color: var(--link-on-surface); }

/* --------------------------------------------------------------------------
   2.3.3 — liikumine seisab, kui kasutaja seda küsib
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}