/* =========================================================================
   MHP — dizajnerski tokeni
   Izvor: MHP Brand Guidelines v2.4 (listopad 2026.) · brand kit v1.1
   Pravilo: tema i blokovi koriste ISKLJUČIVO ove varijable, nikad izravne hex vrijednosti.
   ========================================================================= */

:root {
  /* ---------- Boje — MHP sustav ---------- */
  --mhp-bijela:        #FEFEFE;  /* glavna podloga */
  --mhp-siva:          #ECECEC;  /* druga podloga, izmjena sekcija */
  --mhp-skriljevac:    #303542;  /* tekst, naslovi, tamne plohe, footer */
  --mhp-crna:          #000000;  /* SAMO riječ „MHP” kao naglasak brenda i znak */
  --mhp-crvena:        #ED1C24;  /* akcent: plohe, glavni CTA, kvadratić, riječ u H1 — NE sitni tekst */
  --mhp-crvena-tekst:  #9A0812;  /* crveni tekst, linkovi, kickeri, hover na crvenom */
  --mhp-zelena:        #243D27;  /* rijetka CTA ploha s bijelim tekstom — najviše 1× po stranici */

  /* Pomoćne vrijednosti */
  --mhp-muted:         #5A5F6B;  /* podnaslovi, opisi, meta (6,4 : 1 na bijeloj) */
  --mhp-rub:           #DCDCDC;  /* tanke linije i rubovi kartica */
  --mhp-na-tamnoj:        #C9CCD4; /* sekundarni tekst na škriljevcu */
  --mhp-na-tamnoj-linija: #4A5060; /* razdjelnici na škriljevcu */
  --mhp-kicker-na-tamnoj: #F2B8BA; /* kicker na škriljevcu */
  --mhp-na-zelenoj:       #D3DDD4; /* sekundarni tekst na zelenoj */


  /* Imenovane pomoćne vrijednosti (v1.1 – T-K4: nema izravnih hex vrijednosti u komponentama) */
  --mhp-bijela-cista:     #FFFFFF;  /* tekst i obrub na tamnim/obojenim plohama, bijeli gumb, polje obrasca */
  --mhp-podaci-oznaka:    #A9AEB9;  /* oznake (dt) u kartici kontakt podataka na škriljevcu */
  --mhp-tint-hover:       rgba(48,53,66,.05);   /* hover reda područja */
  --mhp-tint-odabir:      rgba(48,53,66,.04);   /* odabrana opcija obrasca */
  --mhp-kat-prakticni:    rgba(236,236,236,.55); /* hero članka – praktični savjeti */
  --mhp-kat-osvrti:       rgba(254,254,254,.35); /* hero članka – poduzetnički osvrti */
  --mhp-rub-polja:        #5A5F6B;  /* rub polja i opcija obrasca – kontrast ≥ 3 : 1 (T-K1) */

  /* ---------- Pokret (vodič v2.4, pogl. 07) ---------- */
  --mhp-pokret-krivulja:  cubic-bezier(.2,.7,.1,1);  /* jedna krivulja za sve: brz početak, mekan kraj */
  --mhp-pokret-otkrivanje: .7s;    /* riječ naslova izranja */
  --mhp-pokret-razmak:    45ms;    /* razmak između riječi */
  --mhp-pokret-prijelaz:  .45s;    /* prijelaz između stranica */
  --mhp-pokret-hover:     .35s;    /* redovi, kartice */
  --mhp-pokret-brojke:    4000;    /* ms – brojke se izbroje (čita mhp-pokret.js) */
  --mhp-pokret-hub:       700;     /* ms – HUB rezultat (čita mhp-pokret.js) */

  /* Prozirne podloge sekcija (Raster se nazire ispod) */
  --mhp-sekcija-bijela: rgba(254,254,254,.90);
  --mhp-sekcija-siva:   rgba(236,236,236,.94);
  --mhp-header:         rgba(254,254,254,.92);

  /* ---------- Tipografija ---------- */
  --mhp-font-naslov: 'Archivo', system-ui, sans-serif;  /* 700 · 800 · 900 */
  --mhp-font-tekst:  'Lato', system-ui, sans-serif;     /* 400 · 700 (900 iznimno). Lato NEMA 500/600 */
  --mhp-font-oznaka: 'DM Sans', system-ui, sans-serif;  /* kickeri, oznake, cijeli HUB */

  --mhp-h1:        clamp(52px, 8vw, 96px);
  --mhp-h1-lh:     .96;
  --mhp-h1-w:      900;
  --mhp-h2:        clamp(36px, 4.6vw, 52px);
  --mhp-h2-lh:     1;
  --mhp-h2-w:      800;
  --mhp-h3:        24px;   /* kartice, redovi: 22–26 px */
  --mhp-h3-w:      800;
  --mhp-tekst:     19px;
  --mhp-tekst-lh:  1.6;
  --mhp-lead:      21px;
  --mhp-gumb:      19px;   /* 19 px bold = „veliki tekst” po WCAG-u → bijelo na crvenoj prolazi */
  --mhp-kicker:    12.5px;
  --mhp-kicker-razmak: .2em;
  --mhp-naslov-razmak: -.025em;

  /* ---------- Raspored ---------- */
  --mhp-max:          1180px;
  --mhp-rub-stranice: 24px;   /* 16px na mobitelu */
  --mhp-sekcija-y:    112px;  /* 80px na mobitelu */
  --mhp-header-h:     76px;
  --mhp-tekst-stupac: 680px;  /* blog članak */

  /* ---------- Radijusi ---------- */
  --mhp-r-kartica: 16px;
  --mhp-r-ploha:   20px;
  --mhp-r-gumb:    999px;
  --mhp-r-polje:   14px;

  /* ---------- Crvena traka (samo tamne plohe) ---------- */
  --mhp-traka: 10px;

  /* ---------- Pokret ---------- */
  --mhp-prijelaz: .2s ease;
}

@media (max-width: 760px) {
  :root {
    --mhp-rub-stranice: 16px;
    --mhp-sekcija-y: 80px;
  }
}

/* =========================================================================
   MHP HUB — zaseban sustav. Ne miješati s MHP tokenima.
   Crvena ne ulazi u HUB; HUB narančasta ne izlazi iz HUB-a.
   ========================================================================= */
:root {
  --hub-bg:        #0D0D0D;  /* near-black */
  --hub-panel:     #161616;
  --hub-polje:     #0A0A0A;
  --hub-mreza:     #141414;  /* grid 40 px */
  --hub-rub:       #242424;
  --hub-tekst:     #F2F2F2;
  --hub-muted:     #A6A6A6;
  --hub-plava:     #5B9BE8;  /* primarna; [HUB] je uvijek plav */
  --hub-plava-cta: #2F73C2;
  --hub-zelena:    #3FBF6A;  /* „dostupno” — postoji samo u HUB-u */
  --hub-narancasta:#FF6700;  /* ISKLJUČIVO upozorenja, validacija, EXIT HUB */
  --hub-plava-hover:#3A82D6;  /* hover plavog gumba */
  --hub-zelena-rub:#1F4D2E;  /* rub statusa „dostupno” */
  --hub-tekst-alat:#D6D6D6;  /* tekst kartice alata */
  --hub-font:      'DM Sans', system-ui, sans-serif;
  --hub-r:         6px;
}