/* ==========================================================================
   Grano Line, Design tokeni
   Izvedeno iz /Design PNG makete (1440px) i brand materijala iz /Dokumentacija
   ========================================================================== */

:root {
  /* --- Boje: neutralna osnova ------------------------------------------ */
  --c-ink:            #111111;   /* naslovi, dugmad, hairline linije       */
  --c-ink-soft:       #2e2e2e;
  --c-body:           #3d3d3d;   /* telo teksta                            */
  --c-muted:          #6b6b6b;   /* meta, placeholderi, breadcrumb         */
  --c-line:           #111111;   /* sekcijske hairline linije              */
  --c-border:         #d8d8d8;   /* okviri kartica i polja                 */

  /* --- Boje: pozadine --------------------------------------------------- */
  --c-surface:        #ffffff;
  --c-surface-alt:    #f0f0f0;   /* svetle kartice na Galeriji             */
  --c-surface-footer: #f2f2f2;
  --c-sage:           #dadcd1;   /* kartice prednosti / istaknuti blokovi  */
  --c-sage-deep:      #c9ccbd;
  --c-placeholder:    #d9d9d9;   /* skeleton polja za slike                */

  /* --- Boje: topli brand akcenat (bež / braon) -------------------------- */
  --c-brand:          #7a5c3e;
  --c-brand-strong:   #5d452d;
  --c-brand-soft:     #a8896a;
  --c-brand-tint:     #f3eee7;

  /* --- Boje: na tamnoj podlozi (hero) ----------------------------------- */
  --c-on-dark:        #ffffff;
  --c-on-dark-soft:   rgba(255, 255, 255, 0.82);
  --c-scrim:          rgba(28, 20, 12, 0.42);

  /* --- Statusi (validacija forme) --------------------------------------- */
  --c-error:          #b3261e;
  --c-success:        #2e6b3f;

  /* --- Tipografija ------------------------------------------------------ */
  --ff-sans: "Outfit", "Poppins", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:     clamp(2.5rem, 1.55rem + 3.05vw, 4rem);      /* 40 → 64 */
  --fs-page:     clamp(2.25rem, 1.14rem + 3.56vw, 4.5rem);   /* 36 → 72 */
  --fs-h2:       clamp(1.625rem, 1.35rem + 0.89vw, 2rem);    /* 26 → 32 */
  --fs-h3:       clamp(1.25rem, 1.13rem + 0.4vw, 1.5rem);    /* 20 → 24 */
  --fs-h4:       1.125rem;                                   /* 18      */
  --fs-lead:     clamp(1rem, 0.94rem + 0.2vw, 1.125rem);     /* 16 → 18 */
  --fs-body:     1rem;                                       /* 16      */
  --fs-sm:       0.9375rem;                                  /* 15      */
  --fs-xs:       0.8125rem;                                  /* 13      */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --ls-tight:    -0.02em;
  --ls-wide:     0.08em;
  --ls-wider:    0.14em;

  /* --- Razmaci (4px skala) ---------------------------------------------- */
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  2.5rem;    /* 40 */
  --sp-8:  3rem;      /* 48 */
  --sp-9:  4rem;      /* 64 */
  --sp-10: 5rem;      /* 80 */
  --sp-11: 6rem;      /* 96 */
  --sp-12: 7.5rem;    /* 120 */

  --section-y: clamp(3.5rem, 2.2rem + 4.2vw, 6.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --container:      1440px;
  --container-pad:  clamp(1.25rem, 0.6rem + 2.1vw, 2.5rem);
  --measure:        68ch;
  --header-h:       78px;
  --header-h-sm:    64px;

  /* --- Radijusi ---------------------------------------------------------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* --- Senke ------------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --sh-md: 0 6px 20px rgba(17, 17, 17, 0.10);
  --sh-lg: 0 18px 48px rgba(17, 17, 17, 0.16);

  /* --- Kretanje ---------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur:      260ms;
  --dur-slow: 420ms;
  --ease:     cubic-bezier(0.32, 0.72, 0.28, 1);

  /* --- Slojevi ----------------------------------------------------------- */
  --z-sticky:  100;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 400;
}