/* Čudesna šuma — dizajnerski tokeni
   Izvedeno iz Knjige vizualnog identiteta v1.0 (kolovoz 2026.).
   Boje: str. 10-11. Tipografija: str. 12-13. Grafički jezik: str. 14. */

:root {
  /* ── Boje ─────────────────────────────────────────────────────────
     Šumska i tamna tinta nose tekst. Livada je akcent: na bijeloj daje
     omjer 2,00:1 pa se nikad ne koristi za odlomke, gumbe ni sitni tekst. */
  --cs-sumska: #2b5828;   /* primarna — tekst, gumbi, plohe */
  --cs-paprat: #557f43;   /* sekundarna — 4,66:1 na bijeloj, AA za veći tekst */
  --cs-livada: #9bc469;   /* SAMO akcent — podloge, veliki naslovi, ikone */
  --cs-krema:  #f5f1e7;   /* dominantna podloga */
  --cs-kora:   #5b4636;   /* topli neutral */
  --cs-tinta:  #263126;   /* tekst na kremi i bijeloj */
  --cs-bijela: #ffffff;

  /* Livada je propisana kao akcent, ali na zelenim plohama pada na 4,15:1 —
     ispod AA za sitni tekst. Ovo je njezina svjetlija inačica za tekst:
     5,64:1 na šumskoj, 4,66:1 na plohi tarife. */
  --cs-livada-tekst: #c2dea2;


  /* Omjer ploha koji knjiga preporučuje: 45 % krema, 30 % bijela,
     15 % zelene, ostatak kora i tinta. */

  --cs-tekst:          var(--cs-tinta);
  --cs-tekst-prigusen: #4f5a4f;
  --cs-podloga:        var(--cs-krema);
  --cs-ploha:          var(--cs-bijela);
  --cs-obrub:          #e0dac9;

  /* ── Tipografija ──────────────────────────────────────────────── */
  --cs-font-naslov: "Fraunces", Georgia, "Times New Roman", serif;
  --cs-font-tekst:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Skala sa str. 13; clamp pokriva raspon mobitel → desktop. */
  --cs-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 4rem);      /* 36 → 64 px */
  --cs-h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);   /* 28 → 40 px */
  --cs-h3:      clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);   /* 20 → 24 px */
  --cs-odlomak: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);    /* 16 → 18 px */
  --cs-oznaka:  0.8125rem;                                  /* 13 px */

  --cs-lh-naslov:  1.15;
  --cs-lh-tekst:   1.65;
  --cs-ls-oznaka:  0.08em;

  /* ── Prostor ──────────────────────────────────────────────────── */
  --cs-razmak-1: 0.5rem;
  --cs-razmak-2: 1rem;
  --cs-razmak-3: 1.5rem;
  --cs-razmak-4: 2.5rem;
  --cs-razmak-5: 4rem;
  --cs-razmak-6: 6rem;

  /* ── Oblici ───────────────────────────────────────────────────────
     Knjiga traži meke zaobljene okvire (str. 14). */
  --cs-radijus:       12px;
  --cs-radijus-velik: 24px;

  /* Gradijent je isključivo okomit, od šumske prema livadi (str. 14). */
  --cs-gradijent: linear-gradient(180deg, var(--cs-sumska) 0%, var(--cs-sumska) 34%, var(--cs-livada) 100%);

  --cs-sirina-sadrzaja: 1120px;
  --cs-sirina-teksta:   68ch;
}

/* ── Osnovni stilovi ───────────────────────────────────────────── */
body {
  background: var(--cs-podloga);
  color: var(--cs-tekst);
  font-family: var(--cs-font-tekst);
  font-size: var(--cs-odlomak);
  line-height: var(--cs-lh-tekst);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--cs-font-naslov);
  font-weight: 600;
  line-height: var(--cs-lh-naslov);
  color: var(--cs-sumska);
  text-wrap: balance;
}

h1 { font-size: var(--cs-h1); }
h2 { font-size: var(--cs-h2); }

h3 {
  font-family: var(--cs-font-tekst);
  font-weight: 700;
  font-size: var(--cs-h3);
  line-height: 1.3;
  color: var(--cs-tinta);
}

.cs-oznaka {
  font-family: var(--cs-font-tekst);
  font-weight: 700;
  font-size: var(--cs-oznaka);
  letter-spacing: var(--cs-ls-oznaka);
  text-transform: uppercase;
  /* Ne paprat: na kremi daje 4,13:1. Brand book mjeri paprat samo na
     bijeloj (4,66:1), a sam propisuje kremu kao glavnu podlogu. */
  color: var(--cs-sumska);
}

p { max-width: var(--cs-sirina-teksta); }