:root {
  /* ── PÄÄVÄRI ── */
  /* VAALEAMPI VIHREÄ (PÄÄVÄRI) */
  --paavari: #3F4F3A;
  --paavari-hover: #2F3C2C;
  --paavari-himmea: rgba(63, 79, 58, 0.15);

  /* TUMMA VIHREÄ (tarvittaessa CTA / syvät blokit) */
  --vihrea-tumma: #2A3428;
  --vihrea-tumma-hover: #1B231A;
  --vihrea-tumma-himmea: rgba(42, 52, 40, 0.15);

  /* VAALEA VIHREÄ (isot taustablokit / hero alaosa) */
  --vihrea-vaalea: var(--paavari);
  --vihrea-vaalea-hover: var(--paavari-hover);
  --vihrea-vaalea-himmea: var(--paavari-himmea);

  /* ── SIVUVÄRI ── */
  /* Pidä sama vihreä myös korostuksiin */
  --sivuvari: var(--paavari);
  --sivuvari-tumma: var(--paavari);
  --sivuvari-hover: var(--paavari-hover);
  --sivuvari-himmea: var(--paavari-himmea);

  /* ── KOROSTUS = pehmeä roosa ── */
  --korostusvari: #D8C6BD;
  --korostusvari-hover: #cbb5ab;
  --korostusvari-himmea: rgba(216, 198, 189, 0.25);

  /* ── Taustat / pinnat ── */
  /* Sivujen taustaväri */
  --tausta: #F8F6F2;
  --tausta-valkoinen: #FFFFFF;
  --pinta: var(--tausta-valkoinen);

  /* ── Tekstit ── */
  --teksti-tumma: #1A1A1A;
  --teksti-keski: #5A5A5A;
  --teksti-vaalea: #8A8A8A;
  --teksti-kirkas: #ffffff;

  /* ── Otsikot ── */
  --h1-vari: #1A1A1A; /* H1 → musta */
  --h2-vari: var(--paavari); /* H2/H3 → vihreä */
  --h3-vari: var(--paavari);
  --h4-vari: var(--teksti-keski);

  /* ── Varjot ── */
  --varjo: 0 2px 16px rgba(0, 0, 0, 0.08);
  --varjo-vahva: 0 4px 24px rgba(0, 0, 0, 0.12);
  --varjo-kevyt: 0 2px 10px rgba(0, 0, 0, 0.08);

  /* ── Pyöristykset ── */
  --pyoristys: 10px;
  --pyoristys-iso: 16px; 

  /* ── Spacing / rytmi (vakioarvot koko sivustolle) ── */
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 36px;
  --space-2xl: 56px;

  /* Osioiden paddaukset */
  --section-padding: 72px;
  --section-padding-tight: 40px;

  /* Yleiset "stack / flow / grid" -välit */
  /* (kapeampi kappaleväli oletuksena koko sivustolle) */
  --flow-gap: 12px;
  --stack-gap: 16px;
  --grid-gap: 16px;

  --footer-tausta: var(--vihrea-tumma);
  --footer-teksti: #ffffff;
  --footer-otsikko: #ffffff;
  --footer-linkki: #ffffff;
  --footer-linkki-hover: rgba(255, 255, 255, 0.85);
--footer-muted: rgba(255,255,255,0.55);
--footer-raja: rgba(255,255,255,0.12);
  --footer-social: var(--sivuvari);
  --footer-social-hover: var(--paavari);

  /* Yhtenäiset “UI-otsikot” korteissa/listoissa */
  --ui-h3-size: 1.15rem;
  --ui-h3-weight: 700;
  --ui-body-size: 1rem;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4 {
  /* Otsikot takaisin alkuperäiseen fonttiin */
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -0.005em;
}