/* ==========================================================================
   Design Tokens — Stefani
   Single source of truth za boje, fontove, spacing.
   Sve komponente moraju koristiti ove varijable. Bez hardcoded vrednosti.
   ========================================================================== */

:root {
  /* --- Boje ----------------------------------------------------------- */
  --color-bg: #ffffff;
  --color-surface: #F5EDDF;          /* krem/bež — kartice, izdvojene sekcije */
  --color-ink: #000000;              /* puna crna — header, footer, dugmići, tamni naslovi */
  --color-ink-soft: #4a4a4a;         /* sekundarni tekst */
  --color-accent: #ffab00;           /* žuta — aktivni link, hover, akcenat */
  --color-border: #e6e0d3;           /* fini border (derivat krem boje) */
  --color-on-dark: #ffffff;          /* tekst preko tamne pozadine */
  --color-muted: #8a8a8a;            /* meta tekst, copyright */
  --color-danger: #dc2626;           /* crvena — zatvaranje popup-a, upozorenja */
  --color-danger-dark: #b91c1c;      /* tamnija crvena — hover stanje */
  --color-overlay: rgba(0, 0, 0, 0.45); /* overlay preko hero slike */

  /* --- Tipografija --------------------------------------------------- */
  --font-heading: 'Raleway', system-ui, -apple-system, sans-serif;
  --font-body: 'Heebo', system-ui, -apple-system, sans-serif;

  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Type scale (1.25 ratio, prilagođeno) */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: 2.25rem;     /* 36px */
  --fs-2xl: 3rem;       /* 48px */
  --fs-3xl: 4.5rem;     /* 72px */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  /* --- Spacing (8px geometrijska skala) ----------------------------- */
  --space-1: 0.5rem;    /* 8 */
  --space-2: 1rem;      /* 16 */
  --space-3: 1.5rem;    /* 24 */
  --space-4: 2rem;      /* 32 */
  --space-5: 3rem;      /* 48 */
  --space-6: 4rem;      /* 64 */
  --space-7: 100px;     /* sekcijski padding-block (desktop) */
  --space-8: 8rem;      /* 128 */

  /* --- Layout -------------------------------------------------------
     Sekcije koje NISU fullwidth: padding-inline 100px (≥1024), 50px (<1024).
     Sekcije koje JESU fullwidth: header (20px), footer (80/40 + 20), hero (0). */
  --container-max: none;
  --container-pad: 100px;     /* edge padding od ekrana za contained sekcije */
  --header-height: 100px;     /* 20px pad + 60px logo + 20px pad */
  --header-pad: 20px;
  --footer-pad-top: 100px;
  --footer-pad-x: 100px;
  --footer-pad-bottom: 25px;

  /* Minimalistički — uglavnom oštri uglovi */
  --radius-none: 0;
  --radius-sm: 2px;

  /* --- Tranzicije --------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Sve animacije 400ms (jedinstveno trajanje) */
  --t-fast: 400ms;
  --t-med: 400ms;
  --t-slow: 400ms;

  /* --- Z-index lestvica -------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-menu: 200;
  --z-popup: 300;
}

@media (max-width: 1024px) {
  :root {
    --fs-3xl: 3.5rem;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-pad: 50px;
    --space-7: 50px;
    --footer-pad-top: 50px;
    /* Footer ide uz samu ivicu na tabletu i mobilnom - četiri kolone se tu ionako
       prelamaju u dve, pa 50px sa strane samo krade prostor. */
    --footer-pad-x: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    /* MORA da prati stvarnu visinu headera: mobilni ima 10px padding, 42px logo
       i 1px border (components.css @768). Ako se to promeni, promeni i ovo - inače
       se između headera i off-canvas menija vidi traka sadržaja koji se skroluje. */
    --header-height: 63px;     /* 10 + 42 logo + 10 + 1 border */
    --fs-3xl: 2.5rem;
    --fs-2xl: 2rem;
    --fs-xl: 1.75rem;
    --space-8: 5rem;
  }
}

/* Ispod 600px — još tešnji edge padding da content ne bude zalepljen za ivicu */
@media (max-width: 600px) {
  :root {
    --container-pad: 20px;
  }
}