/* =====================================================================
   MORSKA VILA – DIZAJNERSKI TOKENI  v1.1 (listopad 2026)
   Standard pristupačnosti: WCAG 2.1 AA posvuda, AAA (7:1) za osnovni tekst.

   Upotreba:
     <link rel="stylesheet" href="morskavila-tokeni.css">
   Font (Nunito) učitajte prije ove datoteke, npr.:
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&display=swap" rel="stylesheet">

   Način „Veća slova” (+25 %):
     <html data-vel-slova="da">   ili klasa .mv-vel-slova na <html>/<body>
     Primjer prekidača u Profilu:
       const on = localStorage.getItem('mv-vel-slova') === 'da';
       document.documentElement.dataset.velSlova = on ? 'da' : 'ne';
       // pri promjeni: localStorage.setItem('mv-vel-slova', checked ? 'da' : 'ne') + isto postaviti dataset
   ===================================================================== */

:root {
  /* ---------- Paleta ---------- */
  --mv-tirkiz:          #0FA3B1; /* logo, ikone, rubovi, velike površine BEZ teksta, naslovi ≥ 24 px bold */
  --mv-tirkiz-tamni:    #0A707A; /* površine s bijelim tekstom (5,81:1), poveznice (5,81:1 na bijeloj) */
  --mv-sunce:           #F6C344; /* primarni gumbi i oznake – uvijek s tekstom u boji Dubina (7,32:1) */
  --mv-sunce-hover:     #E8B634; /* hover/pritisak primarnog gumba (Dubina 6,38:1) */
  --mv-bijela:          #FFFFFF;
  --mv-svijetli-tirkiz: #D9F2F4; /* sekcije i kartice (Dubina 10,26:1) */
  --mv-dubina:          #123B4A; /* sav tekst (12,0:1 na bijeloj) */
  --mv-onemoguceno-pozadina: #E7EEF0;
  --mv-onemoguceno-tekst:    #4D6A75; /* 4,92:1 */

  /* ---------- Semantičke uloge ---------- */
  --mv-pozadina:            var(--mv-bijela);
  --mv-pozadina-sekcija:    var(--mv-svijetli-tirkiz);
  --mv-tekst:               var(--mv-dubina);
  --mv-tekst-meta:          var(--mv-dubina);   /* meta-tekst NIJE sivi – ista Dubina, manja veličina */
  --mv-povrsina-naglasena:  var(--mv-tirkiz-tamni);
  --mv-tekst-na-naglasenoj: var(--mv-bijela);
  --mv-povrsina-tamna:      var(--mv-dubina);
  --mv-poveznica:           var(--mv-tirkiz-tamni);
  --mv-ikona:               var(--mv-tirkiz);
  --mv-rub:                 var(--mv-tirkiz);
  --mv-fokus:               var(--mv-dubina);   /* na svijetlim pozadinama */
  --mv-fokus-na-tamnom:     var(--mv-sunce);    /* na Dubini i Tirkiznoj tamnoj */

  /* ---------- Tipografija ---------- */
  --mv-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mv-skala: 1;                          /* „Veća slova” = 1.25 */

  --mv-fs-h1:    calc(48px * var(--mv-skala));
  --mv-fs-h2:    calc(34px * var(--mv-skala));
  --mv-fs-h3:    calc(24px * var(--mv-skala));
  --mv-fs-tekst: calc(18px * var(--mv-skala));   /* osnovni tekst */
  --mv-fs-meta:  calc(16px * var(--mv-skala));   /* minimum za bilo koji tekst */
  --mv-fs-gumb:  calc(18px * var(--mv-skala));

  --mv-lh-naslov: 1.15;
  --mv-lh-tekst:  1.5;

  --mv-fw-tekst:  500;   /* Medium – osnovni tekst */
  --mv-fw-meta:   600;   /* SemiBold – meta-tekst i tekst ispod 18 px */
  --mv-fw-h3:     700;
  --mv-fw-naslov: 800;
  --mv-fw-gumb:   800;

  /* ---------- Oblik i razmaci ---------- */
  --mv-dodir-min:     48px;  /* minimalna dodirna površina 48 × 48 px */
  --mv-gumb-visina:   max(48px, calc(52px * var(--mv-skala)));
  --mv-radijus:       16px;
  --mv-radijus-gumb:  999px;
  --mv-rub-debljina:  2px;
  --mv-fokus-debljina: 3px;
  --mv-fokus-razmak:   3px;
  --mv-sjena: 0 2px 12px rgba(18, 59, 74, .10);
}

/* Mobitel: manji naslovi, osnovni tekst ostaje 18 px */
@media (max-width: 600px) {
  :root {
    --mv-fs-h1: calc(36px * var(--mv-skala));
    --mv-fs-h2: calc(28px * var(--mv-skala));
    --mv-fs-h3: calc(22px * var(--mv-skala));
  }
}

/* ---------- Način „Veća slova” (+25 %) ---------- */
:root[data-vel-slova="da"],
.mv-vel-slova {
  --mv-skala: 1.25;
}

/* ---------- Osnova ---------- */
body {
  margin: 0;
  font-family: var(--mv-font);
  font-size: var(--mv-fs-tekst);
  font-weight: var(--mv-fw-tekst);
  line-height: var(--mv-lh-tekst);
  color: var(--mv-tekst);
  background: var(--mv-pozadina);
  -webkit-font-smoothing: antialiased;
}
h1, .mv-h1 { font-size: var(--mv-fs-h1); font-weight: var(--mv-fw-naslov); line-height: var(--mv-lh-naslov); }
h2, .mv-h2 { font-size: var(--mv-fs-h2); font-weight: var(--mv-fw-naslov); line-height: 1.2; }
h3, .mv-h3 { font-size: var(--mv-fs-h3); font-weight: var(--mv-fw-h3);     line-height: 1.3; }
.mv-meta   { font-size: var(--mv-fs-meta); font-weight: var(--mv-fw-meta); line-height: var(--mv-lh-tekst); color: var(--mv-tekst-meta); }

/* Veliki tirkizni naslov – dopušteno samo od 24 px bold naviše */
.mv-naslov-tirkiz { color: var(--mv-tirkiz); font-weight: var(--mv-fw-naslov); font-size: max(24px, 1em); }

/* Poveznice: boja + podcrtavanje (informacija ne smije ovisiti samo o boji) */
a, .mv-poveznica {
  color: var(--mv-poveznica);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 3px; }

/* ---------- Fokus ---------- */
:focus-visible {
  outline: var(--mv-fokus-debljina) solid var(--mv-fokus);
  outline-offset: var(--mv-fokus-razmak);
}
.mv-povrsina-naglasena :focus-visible,
.mv-povrsina-tamna :focus-visible {
  outline-color: var(--mv-fokus-na-tamnom);
}

/* ---------- Površine ---------- */
.mv-povrsina-naglasena { background: var(--mv-povrsina-naglasena); color: var(--mv-tekst-na-naglasenoj); }
.mv-povrsina-tamna     { background: var(--mv-povrsina-tamna);     color: var(--mv-bijela); }
.mv-povrsina-sekcija   { background: var(--mv-pozadina-sekcija);   color: var(--mv-tekst); }
.mv-povrsina-naglasena a, .mv-povrsina-tamna a { color: var(--mv-bijela); }

.mv-kartica {
  background: var(--mv-bijela);
  color: var(--mv-tekst);
  border-radius: var(--mv-radijus);
  box-shadow: var(--mv-sjena);
}

/* ---------- Gumbi ---------- */
.mv-gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--mv-gumb-visina);
  min-width: var(--mv-dodir-min);
  padding: 0 1.4em;
  font-family: var(--mv-font);
  font-size: var(--mv-fs-gumb);
  font-weight: var(--mv-fw-gumb);
  line-height: 1.2;
  border-radius: var(--mv-radijus-gumb);
  border: var(--mv-rub-debljina) solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mv-gumb--primarni   { background: var(--mv-sunce);  color: var(--mv-dubina); }
.mv-gumb--primarni:hover, .mv-gumb--primarni:active { background: var(--mv-sunce-hover); }
.mv-gumb--sekundarni { background: var(--mv-bijela); color: var(--mv-dubina); border-color: var(--mv-dubina); }
.mv-gumb--sekundarni:hover { background: var(--mv-svijetli-tirkiz); }
/* Na tamnim/tirkiznim površinama sekundarni gumb ostaje bijel s Dubina tekstom */
.mv-gumb--na-tamnom  { background: var(--mv-bijela); color: var(--mv-dubina); border-color: var(--mv-bijela); }
.mv-gumb:disabled, .mv-gumb[aria-disabled="true"] {
  background: var(--mv-onemoguceno-pozadina); color: var(--mv-onemoguceno-tekst);
  border-color: transparent; cursor: not-allowed;
}

/* ---------- Oznake (značke) ---------- */
.mv-oznaka {
  display: inline-block;
  font-size: var(--mv-fs-meta); font-weight: 800; line-height: 1.3;
  background: var(--mv-sunce); color: var(--mv-dubina);
  border-radius: 999px; padding: .2em .8em;
}

/* ---------- Prekidač (npr. „Veća slova”) – stanje i tekstom, ne samo bojom ---------- */
.mv-prekidac { display: flex; align-items: center; gap: 12px; min-height: var(--mv-dodir-min); cursor: pointer; font-weight: 700; }
.mv-prekidac input {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 56px; height: 32px; border-radius: 999px;
  background: var(--mv-bijela); border: 2px solid var(--mv-dubina);
  position: relative; flex: none; cursor: pointer;
}
.mv-prekidac input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--mv-dubina); transition: transform .15s;
}
.mv-prekidac input:checked { background: var(--mv-tirkiz-tamni); border-color: var(--mv-tirkiz-tamni); }
.mv-prekidac input:checked::after { transform: translateX(24px); background: var(--mv-bijela); }
.mv-prekidac .mv-stanje::before { content: "Isključeno"; }
.mv-prekidac input:checked ~ .mv-stanje::before { content: "Uključeno"; }

/* ---------- Pomoćno ---------- */
.mv-samo-citac { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}