/* tokens.css — FAZA 2: jedino mesto gde postoje boje, senke, radijusi,
   razmaci i trajanja. Nijedna od tih vrednosti ne sme da se pojavi
   direktno u layout.css — tamo idu samo var() pozivi.

   Jezik: light neumorphism / soft UI. Povrsine se razlikuju po visini,
   ne po ivici: senka u dva sloja (tamna dole-desno, svetla gore-levo)
   daje utisak da je kartica izdignuta iz pozadine. Teal je jedini
   akcenat i nosi samo tri stvari: aktivnu stavku, dugme akcije i
   izabrani red. */

:root {
  /* ---------------------------------------------------------------
     Povrsine — cetiri visine
     --------------------------------------------------------------- */
  --bg:             #e8ecf3;   /* ambijent, telo stranice */
  --surface:        #eff2f8;   /* sidebar, kartice, tabele, panel */
  --surface-raised: #f5f7fb;   /* red pod misem, aktivno dugme */
  --surface-sunken: #e2e7f0;   /* udubljena polja: input, select, graf */

  /* ---------------------------------------------------------------
     Akcenat — teal, jedini u celom alatu
     --------------------------------------------------------------- */
  --accent:        #17a3a3;
  --accent-strong: #0d7c7c;
  --accent-soft:   #d7efee;   /* podloga aktivne stavke i izabranog reda */
  --accent-tint:   #e9f7f6;   /* jos tise: hover nad akcenat povrsinom */

  /* ---------------------------------------------------------------
     Signalne boje pozicija — rast, pad, bez promene
     --------------------------------------------------------------- */
  --up:        #128f61;
  --up-soft:   #dcf1e7;
  --down:      #cc4b46;
  --down-soft: #fae4e3;
  --flat:      #8892a4;
  --flat-soft: #e6eaf1;

  /* ---------------------------------------------------------------
     Serije na grafu — jedna boja po pracenoj aplikaciji. Prva je akcenat
     jer je najcesce i jedina; ostale tri su odvojene i po tonu i po
     svetlini, da se razlikuju i kad se linije preklope.
     --------------------------------------------------------------- */
  --series-0: var(--accent);
  --series-1: #6b62d6;
  --series-2: #c9761f;
  --series-3: #b2508f;

  /* ---------------------------------------------------------------
     Tekst
     --------------------------------------------------------------- */
  --text:       #1b2130;
  --text-muted: #5a6478;
  --text-faint: #8892a4;
  --text-on-accent: #ffffff;

  /* ---------------------------------------------------------------
     Linije — tanke, samo za razdvajanje redova i sekcija
     --------------------------------------------------------------- */
  --line:        #dfe4ed;
  --line-strong: #cbd4e1;

  /* ---------------------------------------------------------------
     Senke — dva sloja. Tamni sloj je bocna svetlost odozgo-levo,
     svetli sloj je odbljesak. Menjaju se samo ovde.
     --------------------------------------------------------------- */
  --sh-dark:   rgba(160, 174, 196, .48);
  --sh-darker: rgba(160, 174, 196, .60);
  --sh-light:  rgba(255, 255, 255, .95);
  --sh-accent: rgba(23, 163, 163, .30);

  --shadow-sm:      2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light);
  --shadow-raised:  5px 5px 12px var(--sh-dark), -5px -5px 12px var(--sh-light);
  --shadow-lifted:  9px 9px 22px var(--sh-dark), -7px -7px 18px var(--sh-light);
  --shadow-inset:   inset 3px 3px 6px var(--sh-darker), inset -3px -3px 6px var(--sh-light);
  --shadow-inset-sm: inset 2px 2px 4px var(--sh-darker), inset -2px -2px 4px var(--sh-light);
  --shadow-accent:  0 4px 12px var(--sh-accent);
  --shadow-row:     0 4px 12px var(--sh-dark);

  /* ---------------------------------------------------------------
     Radijusi — 16 kartice, 8 dugmad, 4 inputi
     --------------------------------------------------------------- */
  --r-card:    16px;
  --r-control: 8px;
  --r-field:   4px;
  --r-pill:    999px;

  /* ---------------------------------------------------------------
     Razmaci, 4px skala
     --------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* ---------------------------------------------------------------
     Tipografija — gusto, Linear-style
     --------------------------------------------------------------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;   /* osnovna velicina tabela i tela */
  --fs-lg:  15px;
  --fs-xl:  20px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;   /* broj na stat kartici */

  --lh-tight: 1.2;
  --lh-base:  1.5;

  --tracking-tight: -.02em;   /* svi naslovi */
  --tracking-wide:   .04em;   /* zaglavlja tabela, oznake */

  /* ---------------------------------------------------------------
     Raspored
     --------------------------------------------------------------- */
  --sidebar-w:   220px;
  --panel-w:     380px;
  --content-max: 1240px;

  /* ---------------------------------------------------------------
     Kretanje
     --------------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  200ms;
  --dur-slow: 320ms;

  /* ---------------------------------------------------------------
     Skeleton shimmer — traka svetla koja putuje preko sivog polja
     --------------------------------------------------------------- */
  --skeleton-base: #e0e5ee;
  --skeleton-hi:   #f4f7fb;
  --skeleton-gradient: linear-gradient(
    100deg,
    var(--skeleton-base) 20%,
    var(--skeleton-hi) 45%,
    var(--skeleton-base) 70%
  );

  /* ---------------------------------------------------------------
     Ikone kao data URI. Ovde su jer u njima stoje boje.
     Ikona praznog stanja ide kroz mask-image, pa joj boju daje
     --text-faint, a ne sam SVG.
     --------------------------------------------------------------- */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235a6478' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --icon-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13h4l1.4 2.6h6.2L16.5 13h4'/%3E%3Cpath d='M4.6 13 7 5.9A2 2 0 0 1 8.9 4.5h6.2a2 2 0 0 1 1.9 1.4L19.4 13v4.5a2 2 0 0 1-2 2H6.6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}