/* ==========================================================================
   KUĆA ZDRAVLJA, dizajn tokeni
   Jedini izvor istine za boje, tipografiju, razmake i senke.
   Nijedan drugi fajl ne sme da piše gole hex vrednosti.
   ========================================================================== */

:root {
  /* --- Boje: osnovna paleta ------------------------------------------------
     Petrol zelena nosi medicinski autoritet, terakota i krem donose toplinu
     kuće. Klijentkinja je tražila da sajt ne deluje bezlično, ali ni
     neozbiljno, odatle prigušen, topao ton umesto "wellness" pastela.      */
  --kz-zelena-najdublja: #12332F;
  --kz-zelena-duboka:    #1D4B45;
  --kz-zelena:           #2E6A61;
  --kz-zelena-srednja:   #4C8C81;
  --kz-zelena-bleda:     #D9E7E2;
  --kz-zelena-najbleda:  #EDF4F1;

  --kz-terakota-tamna:   #8E4E2C;
  --kz-terakota:         #B0653C;
  --kz-terakota-bleda:   #F2E2D6;

  --kz-zlatna:           #C08A2E;
  --kz-zlatna-bleda:     #F6EBD3;

  /* Neutralne: topli krem umesto hladno bele */
  --kz-krem:             #FBF8F3;
  --kz-krem-topliji:     #F5EFE5;
  --kz-krem-tamniji:     #EBE3D5;
  --kz-bela:             #FFFFFF;

  --kz-mastilo:          #1C2926;
  --kz-tekst:            #2C3A36;
  --kz-tekst-blazi:      #56645F;
  --kz-tekst-tih:        #7C8884;
  --kz-linija:           #E2DACC;
  --kz-linija-blaga:     #EFE9DE;

  /* --- Semantičke uloge ---------------------------------------------------- */
  --kz-pozadina:         var(--kz-krem);
  --kz-pozadina-uzdignuta: var(--kz-bela);
  --kz-pozadina-utisnuta:  var(--kz-krem-topliji);
  --kz-primarna:         var(--kz-zelena-duboka);
  --kz-primarna-jaka:    var(--kz-zelena-najdublja);
  --kz-akcenat:          var(--kz-terakota);
  --kz-na-primarnoj:     #F4F1E9;

  /* --- Tipografija --------------------------------------------------------- */
  --kz-font-naslov: 'Lora', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --kz-font-telo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Fluidna skala: min na 360px, max na 1280px */
  --kz-t-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --kz-t-sm:   clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
  --kz-t-baza: clamp(1.02rem, 0.98rem + 0.20vw, 1.13rem);
  --kz-t-md:   clamp(1.14rem, 1.07rem + 0.32vw, 1.32rem);
  --kz-t-lg:   clamp(1.34rem, 1.20rem + 0.62vw, 1.70rem);
  --kz-t-xl:   clamp(1.62rem, 1.36rem + 1.14vw, 2.30rem);
  --kz-t-2xl:  clamp(1.95rem, 1.50rem + 1.98vw, 3.05rem);
  --kz-t-3xl:  clamp(2.30rem, 1.60rem + 3.10vw, 4.00rem);

  --kz-visina-tesna:  1.18;
  --kz-visina-naslov: 1.28;
  --kz-visina-telo:   1.72;
  --kz-visina-citak:  1.82; /* za duge stručne tekstove */

  /* --- Razmaci (skala 4px) ------------------------------------------------- */
  --kz-r-1:  0.25rem;
  --kz-r-2:  0.5rem;
  --kz-r-3:  0.75rem;
  --kz-r-4:  1rem;
  --kz-r-5:  1.5rem;
  --kz-r-6:  2rem;
  --kz-r-7:  2.75rem;
  --kz-r-8:  3.5rem;
  --kz-r-9:  4.5rem;
  --kz-r-10: 6rem;
  --kz-r-11: 8rem;

  /* Vertikalni ritam sekcija, fluidan */
  --kz-sekcija: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);

  /* --- Širine -------------------------------------------------------------- */
  --kz-sirina-uska:   38rem;   /* tekst za čitanje */
  --kz-sirina-tekst:  44rem;
  --kz-sirina-srednja: 62rem;
  --kz-sirina-siroka: 78rem;
  --kz-sirina-puna:   90rem;
  --kz-oivicenje:     clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* --- Zaobljenja ---------------------------------------------------------- */
  --kz-zaob-sm:  6px;
  --kz-zaob:     10px;
  --kz-zaob-md:  14px;
  --kz-zaob-lg:  20px;
  --kz-zaob-pun: 999px;

  /* --- Senke: mekane i tople, nikad crne ----------------------------------- */
  --kz-senka-sm:  0 1px 2px rgba(28, 41, 38, 0.05),
                  0 2px 6px rgba(28, 41, 38, 0.04);
  --kz-senka:     0 2px 4px rgba(28, 41, 38, 0.05),
                  0 8px 20px rgba(28, 41, 38, 0.06);
  --kz-senka-md:  0 4px 10px rgba(28, 41, 38, 0.06),
                  0 16px 36px rgba(28, 41, 38, 0.08);
  --kz-senka-lg:  0 8px 20px rgba(28, 41, 38, 0.07),
                  0 30px 60px rgba(28, 41, 38, 0.10);

  /* --- Kretanje ------------------------------------------------------------ */
  --kz-brzo:   140ms cubic-bezier(0.4, 0, 0.2, 1);
  --kz-lako:   240ms cubic-bezier(0.4, 0, 0.2, 1);
  --kz-mirno:  420ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --kz-fokus: 0 0 0 3px var(--kz-krem), 0 0 0 5.5px var(--kz-zelena-srednja);

  --kz-zaglavlje-visina: 4.75rem;
}

@media (max-width: 48rem) {
  :root { --kz-zaglavlje-visina: 4.1rem; }
}

/* Poštuj korisnika koji je isključio animacije. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}