/* ==========================================================================
   Direkt Agencija — dizajnerski tokeni
   Sve vrijednosti dizajna žive ovdje. Komponente u style.css koriste
   isključivo var(--...) — ništa se ne hardkodira po komponentama.
   ========================================================================== */

:root {

  /* --- Boje: podloge ------------------------------------------------------
     bg-base    = osnovna podloga stranice (topla, gotovo bijela)
     bg-alt     = alternativna sekcija (za ritam smjene sekcija)
     bg-dark    = tamne sekcije (footer, proces, "još s bloga" na objavama)
     bg-accent  = žuta CTA ploha
     bg-surface = kartice i polja unutar tamnih ploha                        */
  --boja-bg-base: #FBFAF7;
  --boja-bg-alt: #F1EEE6;
  --boja-bg-dark: #0E1A24;
  --boja-bg-dark-2: #1B3C56;
  --boja-bg-accent: #FFDE59;
  --boja-bg-surface: #FFFFFF;

  /* --- Boje: tekst -------------------------------------------------------- */
  --boja-tekst: #0E1A24;          /* osnovni tekst i naslovi */
  --boja-tekst-prigusen: rgba(14, 26, 36, 0.62);  /* uvodi, opisi, meta */
  --boja-tekst-slab: rgba(14, 26, 36, 0.45);      /* oznake, datumi */
  --boja-tekst-na-tamnom: #FFFFFF;
  --boja-tekst-na-tamnom-prigusen: rgba(255, 255, 255, 0.66);

  /* --- Boje: akcent -------------------------------------------------------
     Žuta = poziv na akciju i naglasak (nikad za tekst na svijetlom).
     Plava = poveznice, podnaslovi sekcija, sekundarne akcije.              */
  --boja-akcent: #FFDE59;
  --boja-akcent-hover: #FFE98F;
  --boja-akcent-kontrast: #0E1A24; /* tekst na žutoj podlozi */
  --boja-link: #1B3C56;
  --boja-link-hover: #0E1A24;

  /* --- Boje: linije, rubovi, sjene ---------------------------------------- */
  --boja-rub: rgba(14, 26, 36, 0.14);
  --boja-rub-jaci: rgba(14, 26, 36, 0.28);
  --boja-rub-na-tamnom: rgba(255, 255, 255, 0.16);
  --sjena-mala: 0 2px 8px rgba(14, 26, 36, 0.06);
  --sjena-srednja: 0 10px 24px rgba(14, 26, 36, 0.10);
  --sjena-akcent: 0 10px 24px rgba(255, 222, 89, 0.40);

  /* --- Boje: stanja u formama --------------------------------------------- */
  --boja-uspjeh: #1F7A4C;
  --boja-uspjeh-bg: rgba(31, 122, 76, 0.08);
  --boja-greska: #B3261E;
  --boja-greska-bg: rgba(179, 38, 30, 0.07);
  --boja-fokus: #1B3C56;           /* obrub focus-visible prstena */

  /* --- Tipografija: obitelji ----------------------------------------------
     Archivo   = svi naslovi i brojčani naglasci (varijabilna širina!)
     Instrument Sans = tekst, navigacija, oznake, forme                      */
  --font-naslov: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-tekst: "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* --- Tipografija: skala --------------------------------------------------
     Fluid vrijednosti (clamp) za sve što se mora prilagoditi mobitelu.      */
  --tf-oznaka: 11px;                              /* eyebrow, kategorije */
  --tf-meta: 12.5px;                              /* datumi, mikro-tekst */
  --tf-sitno: 14px;                               /* footer, pomoćni tekst */
  --tf-tekst: 16px;                               /* osnovni tekst */
  --tf-tekst-veliki: 17.5px;                      /* tekst u članku */
  --tf-uvod: clamp(1.05rem, 1.4vw, 1.25rem);      /* lead ispod naslova */
  --tf-h4: clamp(1.05rem, 1.4vw, 1.2rem);
  --tf-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --tf-h2: clamp(1.6rem, 3.2vw, 2.9rem);
  --tf-h1: clamp(2.1rem, 5vw, 4.4rem);
  --tf-hero: clamp(2.1rem, 7.35vw, 7.6rem);      /* samo hero naslovnice */
  --tf-stat: clamp(2.4rem, 4.6vw, 4.4rem);        /* brojke u statistici */

  /* --- Tipografija: line-height i letter-spacing po razini ----------------- */
  --lh-hero: 0.88;
  --lh-naslov: 1.0;
  --lh-podnaslov: 1.16;
  --lh-tekst: 1.62;
  --lh-tekst-clanak: 1.72;
  --ls-hero: -0.045em;
  --ls-naslov: -0.035em;
  --ls-podnaslov: -0.025em;
  --ls-tekst: 0;
  --ls-oznaka: 0.18em;             /* velika slova, razmaknuto */

  /* --- Težine ------------------------------------------------------------- */
  --tez-tekst: 400;
  --tez-medium: 500;
  --tez-semibold: 600;
  --tez-bold: 700;
  --tez-black: 800;

  /* --- Razmaci ------------------------------------------------------------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-6: 32px;
  --r-7: 48px;
  --r-8: 64px;
  --r-9: 96px;
  --r-10: 128px;

  /* Vertikalni ritam sekcija */
  --sekcija-y: var(--r-9);          /* desktop: 96px gore/dolje */
  --sekcija-y-velika: var(--r-10);  /* naglašene sekcije */

  /* --- Kontejner ----------------------------------------------------------- */
  --kontejner-max: 1440px;
  --kontejner-padding: var(--r-8);   /* 64px na desktopu */
  --clanak-max: 68ch;                /* mjera teksta u blog objavi */

  /* --- Radiusi i rubovi ----------------------------------------------------
     Dizajn je namjerno oštar: radius se koristi samo na gumbima i poljima.  */
  --radius-0: 0;
  --radius-polje: 2px;
  --radius-gumb: 999px;
  --rub-tanki: 1px;
  --rub-deblji: 2px;

  /* --- Tranzicije ----------------------------------------------------------- */
  --trajanje-brzo: 160ms;
  --trajanje: 260ms;
  --trajanje-sporo: 420ms;
  --easing: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* --- Slojevi -------------------------------------------------------------- */
  --z-header: 80;
  --z-izbornik: 90;
}

/* Mobilne vrijednosti — mijenjaju se samo razmaci i padding kontejnera.
   Tipografija je fluid pa ne treba poseban set. */
@media (max-width: 860px) {
  :root {
    --sekcija-y: var(--r-7);          /* 48px */
    --sekcija-y-velika: var(--r-8);   /* 64px */
    --kontejner-padding: var(--r-5);  /* 24px */
  }
}