/* =========================================================
   Vindex Studio — Design Tokens (variables.css)
   Svijetla tema. Ovo je JEDINI izvor istine za boje, tipografiju,
   razmake, sjene i ostale dizajn vrijednosti — sve ostale CSS
   datoteke referenciraju ove varijable, nema hardkodiranih vrijednosti.
   ========================================================= */

:root {
  /* ---------- Boje: pozadine (svijetla, gotovo bijela skala) ---------- */
  --color-bg: #fafaf8; /* osnovna pozadina stranice */
  --color-bg-alt: #f1f2ee; /* alternativna pozadina sekcije (zebra ritam) */
  --color-surface: #ffffff; /* kartice, podignute površine */
  --color-surface-sunken: #f5f6f3; /* udubljene površine (inputi, kod blokovi) */

  /* ---------- Boje: rubovi ---------- */
  --color-border: rgba(17, 24, 21, 0.08);
  --color-border-strong: rgba(17, 24, 21, 0.14);
  --color-border-accent: rgba(4, 120, 87, 0.35);

  /* ---------- Boje: tekst ---------- */
  --color-text-primary: #12161a; /* naslovi, najvažniji tekst — gotovo crna */
  --color-text-secondary: #4b5359; /* standardni tekst tijela */
  --color-text-muted: #838b8a; /* pomoćni / manje važan tekst */
  --color-text-on-accent: #ffffff; /* tekst preko akcentne pozadine (gumbi) */

  /* ---------- Boje: akcent — "Vindex Emerald" ---------- */
  --color-accent-400: #34d399; /* svjetliji ton, suptilni detalji/gradijenti */
  --color-accent-500: #059669; /* osnovna brand boja — linkovi, ikone */
  --color-accent-600: #047857; /* pozadina gumba, hover stanje */
  --color-accent-700: #065f46; /* pritisnuto stanje, tekst na svijetloj akcent podlozi */
  --color-accent-soft: rgba(5, 150, 105, 0.08); /* pozadina badgeva/oznaka */
  --color-accent-soft-strong: rgba(5, 150, 105, 0.14);
  --color-accent-glow: rgba(4, 120, 87, 0.28); /* "glow" sjena oko CTA elemenata */

  /* ---------- Boje: tamna "ink" podloga (header, CTA banner, footer) ---------- */
  --color-ink-bg: #12161a;
  --color-ink-bg-deep: #0d1013; /* nijansu tamniji ton — footer, za suptilnu razdvojbu od CTA bannera */
  --color-ink-text: #d7dbd8;
  --color-ink-text-strong: #ffffff;
  --color-ink-text-muted: #8b928e;
  --color-ink-border: rgba(255, 255, 255, 0.1);

  /* ---------- Boje: semantičke ---------- */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;

  /* ---------- Tipografija: font ---------- */
  --font-heading: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;

  /* ---------- Tipografija: debljine ----------
     Korak 29: --fw-regular i --fw-extrabold preslikani na 500/700 umjesto
     400/800 — te woff2 datoteke (poppins-400-*, poppins-800-*) nikad nisu
     ni postojale na disku, pa su H1 naslovi i statistike dosad tiho padali
     na fallback font (Segoe UI) umjesto na Poppins. 500 i 700 stvarno
     postoje, pa se Poppins sada zaista i učitava. */
  --fw-regular: 500; /* sporedni / manje važan tekst */
  --fw-medium: 500; /* zadana debljina tijela teksta — daje "malo boldan" dojam */
  --fw-semibold: 600; /* podnaslovi, gumbi, oznake */
  --fw-bold: 700; /* H2 / H3 */
  --fw-extrabold: 700; /* H1, istaknuti brojevi (stat-number) */

  /* ---------- Tipografija: veličine (fluid, clamp = mobitel -> desktop) ---------- */
  --fs-h1: clamp(2.25rem, 1.7rem + 2.3vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.55rem + 1.3vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --fs-h4: clamp(1.25rem, 1.13rem + 0.4vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-stat: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  /* ---------- Tipografija: visina linije / razmak slova ---------- */
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --ls-heading: -0.02em;
  --ls-eyebrow: 0.14em;

  /* ---------- Razmaci (4px baza) ---------- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */
  --space-9: 6rem; /* 96px */
  --space-10: 8rem; /* 128px */

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --grid-gap: clamp(1.25rem, 2vw, 2rem);
  --layout-hero-height: 700px;

  /* ---------- Zaobljeni kutovi (kontrolirano, ne pretjerano) ---------- */
  --radius-sm: 10px; /* inputi, sitni elementi */
  --radius-md: 16px; /* gumbi */
  --radius-lg: 24px; /* standardne kartice */
  --radius-xl: 32px; /* velike feature kartice, hero paneli */
  --radius-full: 999px; /* pilule, badgevi */

  /* ---------- Sjene (slojevite i meke — prilagođeno svijetloj podlozi) ---------- */
  --shadow-sm: 0 1px 2px rgba(18, 22, 26, 0.05), 0 1px 1px rgba(18, 22, 26, 0.04);
  --shadow-md: 0 6px 16px rgba(18, 22, 26, 0.08), 0 2px 6px rgba(18, 22, 26, 0.05);
  --shadow-lg: 0 20px 45px rgba(18, 22, 26, 0.1), 0 6px 16px rgba(18, 22, 26, 0.06);
  --shadow-accent-glow: 0 10px 28px var(--color-accent-glow), 0 2px 8px rgba(4, 120, 87, 0.18);

  /* ---------- Tranzicije ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --hover-lift: -4px;

  /* ---------- Z-index skala ---------- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ---------- Breakpoint referenca (dokumentacija — CSS varijable se ne mogu
   koristiti unutar @media, pa su ovdje samo zapisane kao podsjetnik za
   konzistentno korištenje kroz cijeli projekt):
   sm: 480px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px
   ---------- */