/* =========================================================
   tokens.css – dizajnerske varijable (boje, fontovi, razmaci)
   Izgled cijele stranice mijenja se ovdje: npr. promjenom
   --color-accent mijenja se akcentna boja na svim stranicama.
   ========================================================= */

:root {
  /* --- Boje --- */
  --color-bg: #ffffff;
  --color-bg-soft: #f4f7fa;          /* pozadina naizmjeničnih sekcija */
  --color-surface: #ffffff;          /* kartice */

  --color-navy-900: #0b1f3a;         /* naslovi, tamna traka */
  --color-navy-800: #12294a;
  --color-navy-700: #1d3a63;

  --color-text: #1f2a37;
  --color-text-muted: #556274;
  --color-text-inverse: #ffffff;

  --color-line: #dbe3ea;             /* rubovi kartica, linije dijagrama */
  --color-line-strong: #b9c6d3;

  --color-accent: #0e7c72;           /* teal za gumbe i poveznice (kontrast ≥ 4.5:1 na bijeloj) */
  --color-accent-hover: #0a655d;
  --color-accent-bright: #14b8a6;    /* samo za ukrase (čvorovi, linije), ne za tekst */
  --color-accent-soft: #e5f5f3;

  --color-danger: #b42318;
  --color-danger-soft: #fdecea;
  --color-success: #0e7c72;
  --color-success-soft: #e5f5f3;

  /* --- Tipografija --- */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* fluidne veličine: clamp(minimum, rast s širinom ekrana, maksimum) */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.65;

  /* --- Razmaci --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);  /* vertikalni razmak sekcija */

  /* --- Ostalo --- */
  --container-max: 72rem;            /* ~1150 px */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgb(11 31 58 / 0.06);
  --shadow: 0 4px 16px rgb(11 31 58 / 0.08);
  --shadow-lg: 0 16px 40px rgb(11 31 58 / 0.12);
  --header-height: 4.5rem;
  --transition: 180ms ease;
}