/* ABK — dizajn tokeni
   Paleta preuzeta iz prethodnog ABK web projekta i potvrđena logotipom.
   Ne mijenjati vrijednosti ovdje bez dogovora — koriste ih obje datoteke stilova. */

:root {
  /* Boje */
  --abk-primary: #29598d;        /* logo plava — glavni akcent */
  --abk-primary-tamna: #1f4570;  /* hover, pritisnuto stanje */
  --abk-deep: #1a2a40;           /* tamna podloga */
  --abk-ink: #0b1422;            /* najdublja — paneli, podnožje */
  --abk-paper: #f4f2ec;          /* papirnata podloga kviza */
  --abk-bijela: #ffffff;
  --abk-accent: #7bb3dc;         /* svijetla plava — linije, naglasci */
  --abk-line: #2b3b52;           /* tanke linije na tamnom */
  --abk-line-svijetla: #ded9cc;  /* tanke linije na papiru */

  /* Pomoćni tekst — dvije vrijednosti jer ista siva ne prolazi WCAG AA
     i na papiru i na tamnoj podlozi. Koristi onu koja odgovara podlozi. */
  --abk-mute: #59636f;           /* na papiru — 5,4:1 */
  --abk-mute-svijetli: #9aa6b8;  /* na tamnoj podlozi — 5,7:1 */
  --abk-signal: #d9541f;         /* upozorenje, greška u obrascu */
  --abk-uspjeh: #2e7d4f;

  /* Tipografija — Archivo za naslove, Inter za tekst.
     Fallback stack drži stranicu čitljivom i bez mreže. */
  --font-naslov: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-tekst: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Skala — monter ovo čita na mobitelu, često vani na suncu.
     Zato je osnovni tekst veći nego uobičajeno. */
  --tekst-mali: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --tekst-osnovni: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --tekst-srednji: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --tekst-pitanje: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  --tekst-veliki: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --tekst-hero: clamp(2.75rem, 1.2rem + 9vw, 7rem);

  /* Razmaci — ritam, ne ujednačeni padding svugdje */
  --razmak-xs: 0.375rem;
  --razmak-s: 0.75rem;
  --razmak-m: 1.25rem;
  --razmak-l: 2rem;
  --razmak-xl: 3.5rem;
  --razmak-sekcija: clamp(3.5rem, 2.5rem + 5vw, 8rem);

  /* Dodirni cilj — rukavice na terenu, palac na mobitelu */
  --dodir-min: 3rem;

  --radijus-s: 3px;
  --radijus-m: 6px;
  --radijus-gumb: 2px;

  --sirina-sadrzaj: 68rem;
  --sirina-kviz: 40rem;

  --trajanje-brzo: 140ms;
  --trajanje-normalno: 280ms;
  --ease-izlaz: cubic-bezier(0.16, 1, 0.3, 1);

  --sjena-kartica: 0 1px 2px rgb(26 42 64 / 0.06), 0 8px 24px -12px rgb(26 42 64 / 0.18);
  --sjena-podignuta: 0 2px 4px rgb(26 42 64 / 0.08), 0 16px 40px -16px rgb(26 42 64 / 0.28);
}

/* Stranica je namjerno svijetla — čita se na suncu, na terenu.
   Nema tamnog načina rada; to je odluka, ne propust. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--abk-paper);
  color: var(--abk-ink);
  font-family: var(--font-tekst);
  font-size: var(--tekst-osnovni);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-naslov);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
}

/* Fokus mora biti vidljiv — dio ljudi prolazi tipkovnicom */
:focus-visible {
  outline: 3px solid var(--abk-primary);
  outline-offset: 3px;
  border-radius: var(--radijus-s);
}

.samo-citac {
  position: absolute;
  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) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}