/* ŽuvelApp — design tokeni.

   Dvije teme, jedan skup imena. Svijetla je ZADANA i živi u bare :root;
   tamna je nadogradnja pod [data-theme="dark"] na <html>. Zato ništa ne
   bljesne: poslužitelj zna izbor (korisnik → kolačić) i stavi atribut prije
   nego stigne ijedan piksel.

   Branka 3.9.: „kako bi bilo da nabava kompletno ima bijelo isto kao i
   svježe? da je cijela app tako" — pa, na prijedlog da tamna nestane: „ja bi
   ostavila ko prekidač."

   Svijetla paleta je paleta Svježe (navy #192744, bakar #A26F2E, off-white
   #F7F5F1) — dosad je vrijedila samo u tom modulu, sad u cijeloj aplikaciji.
   Akcent je i u tamnoj temi bakar, ne više ljubičasta, da su obje teme ista
   aplikacija. Semantičke boje su u svijetloj tamnije (tekst na bijelom), u
   tamnoj svjetlije (tekst na crnom) — imena su ista pa moduli ne znaju za
   razliku.

   Modul koji treba boju NE smije je upisati rukom, nego uzeti token — inače
   ostane tamna u svijetloj temi i obratno. */

:root {
  /* ── Podloge ── */
  --bg: #F7F5F1;
  --bg-elevated: #FFFFFF;
  --bg-panel: #FFFFFF;
  --bg-hover: #EFEBE4;
  --bg-active: #E7E2D9;
  /* Hover reda u tablici: polupropusni sloj preko ćelije umjesto zamjene
     boje, da sticky kolone, grupni tintovi i semafori ostanu vidljivi. */
  --row-hover: rgba(25, 39, 68, 0.06);
  --bg-2: #FFFFFF;

  /* Scrollbar — mora se vidjeti i kad se ne prelazi mišem (Branka 8.8.). */
  --scroll-track: #EDE9E2;
  --scroll-thumb: #C9C1B5;
  --scroll-thumb-hover: #A9A196;

  /* ── Rubovi ── */
  --border: rgba(25, 39, 68, 0.10);
  --border-strong: rgba(25, 39, 68, 0.20);
  /* Razdjelnica redaka je jača od općeg ruba: red u Nabavi ima 20+ kolona
     pa ga oko mora pratiti do kraja, a okviri panela ne smiju otvrdnuti. */
  --border-row: rgba(25, 39, 68, 0.13);
  --border-focus: rgba(162, 111, 46, 0.45);

  /* ── Tekst ── (kontrast prema --bg-panel; WCAG traži 4.5:1) */
  --text: #192744;
  --text-2: #3F4A63;
  --text-3: #5F5A50;
  --text-4: #7A7368;
  --text-disabled: #B8B2A7;

  /* ── Akcent: bakar ── */
  --accent: #A26F2E;
  --accent-hover: #8A5A1E;
  --accent-bg: rgba(162, 111, 46, 0.10);
  --accent-border: rgba(162, 111, 46, 0.35);
  /* Tekst na punoj akcent/semantičkoj podlozi (gumbi, oznake). */
  --on-accent: #FFFFFF;

  /* ── Semantika ── */
  --success: #1F6B33;
  --success-bg: rgba(45, 143, 67, 0.12);
  --warning: #8A5A00;
  --warning-bg: rgba(224, 161, 0, 0.16);
  --danger: #B3261E;
  --danger-bg: rgba(179, 38, 30, 0.10);
  --info: #2C4E8A;
  --info-bg: rgba(59, 111, 182, 0.12);

  /* Pokriće semafori */
  --pokrice-crit: #B3261E;   /* <7d ili <14d kod paletnih */
  --pokrice-warn: #B07800;   /* 7-14d ili 14-21d */
  --pokrice-ok: #1F6B33;     /* 14-21d (reorder zona) */
  --pokrice-cool: #2C4E8A;   /* ≥21d (priprema) */

  /* ── Boje koje su bile upisane rukom po modulima ──
     Izvor: Dolazak kartice, chipovi izvora, Dispo paletni filter, Zadaci.
     Ovdje su da imaju vrijednost i u svijetloj i u tamnoj temi. */
  --izvor-excel: #1F6B33;      /* chip „Excel" / „Primljeno" */
  --izvor-narudzba: #2C5F8A;   /* chip „Narudžba" */
  --izvor-rucno: #8A6D3B;      /* chip „Ručno" */
  --paletni: #6B3FA0;          /* paletni artikli (Dispo filter) */
  --paletni-bg: rgba(107, 63, 160, 0.10);
  --nadopuna: #6B3FA0;         /* nadopuna narudžbe — ista obitelj */
  --nadopuna-bg: rgba(107, 63, 160, 0.10);

  /* Tintovi grupa u tablici Nabave — vrlo blagi, da brojevi ostanu glavni
     signal, ali da se vidi gdje grupa počinje i završava. Na svijetlom su
     tamni preljev, na tamnom svijetli; zato su token, ne fiksna boja. */
  /* Skladišta u Dispu — jedna nijansa po skladištu, kao KANALI (bez alfe),
     pa je pravilo slaže s prozirnošću koja mu treba: rgb(var(--wh-so) / .04)
     za ćeliju, /.12 za zaglavlje, /.4 za crtu. Prozirnost nije boja i ista
     je u obje teme; nijansa je ovdje da se može mijenjati na jednom mjestu. */
  --wh-nz: 100 116 139;
  --wh-so: 59 130 246;
  --wh-rij: 14 165 190;
  --wh-mak: 13 148 136;
  --wh-dub: 147 51 234;
  --wh-hv: 217 119 6;
  --wh-dis: 219 39 119;

  --grupa-tint: rgba(25, 39, 68, 0.025);
  --ytd-tint: rgba(45, 143, 67, 0.05);
  --naruci-tint: rgba(45, 143, 67, 0.05);
  --red-odabran: rgba(162, 111, 46, 0.14);   /* zadnje pregledan artikl */

  /* ── Tipografija ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Sizes */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-base: -0.005em;
  --tracking-wide: 0.04em;

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Layout dimenzije */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 56px;
  --topbar-height: 48px;

  /* Responzivni breakpointi (koristi se kroz @media (max-width)/(min-width)). */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-laptop: 1280px;
  --bp-desktop: 1600px;

  color-scheme: light;
}

/* ══ TAMNA TEMA ══════════════════════════════════════════════════════
   Samo boje; sve mjere, fontovi i razmaci ostaju iz :root. Vrijednosti su
   zatečene iz stare tamne teme — ona je već bila namještena kroz mjesece
   rada, pa je ne diramo. Mijenja se jedino akcent: bakar umjesto ljubičaste,
   da obje teme budu ista aplikacija. */
:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --bg-elevated: #0d0d10;
  --bg-panel: #131316;
  /* Hover je bio #18181b — praktički nevidljiv iznad panela (Branka 8.8.:
     „kad se prelazi preko artikala, malo je isto pretamno"). */
  --bg-hover: #26262c;
  --bg-active: #1f1f23;
  --row-hover: rgba(255, 255, 255, 0.08);
  --bg-2: #131316;

  --scroll-track: #17171b;
  --scroll-thumb: #5c5c66;
  --scroll-thumb-hover: #83838f;

  --border: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.08);
  --border-row: rgba(255, 255, 255, 0.10);
  --border-focus: rgba(198, 145, 74, 0.45);

  /* --text-3 nosi .muted i SVA zaglavlja tablica na 10-11px, pa je podignut
     na 5.50:1; --text-4 nosi × gumbe i tooltip footer → 3.52:1. */
  --text: #fafafa;
  --text-2: #a1a1aa;
  --text-3: #8b8b95;
  --text-4: #6b6b75;
  --text-disabled: #3f3f46;

  --accent: #C6914A;
  --accent-hover: #DCA85E;
  --accent-bg: rgba(198, 145, 74, 0.14);
  --accent-border: rgba(198, 145, 74, 0.35);
  --on-accent: #1a1206;

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.1);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.1);

  --pokrice-crit: #f87171;
  --pokrice-warn: #fbbf24;
  --pokrice-ok: #34d399;
  --pokrice-cool: #60a5fa;

  --izvor-excel: #6dbc5a;
  --izvor-narudzba: #6398c7;
  --izvor-rucno: #c8a35e;
  --paletni: #b07aff;
  --paletni-bg: rgba(176, 122, 255, 0.10);
  --nadopuna: #a48fd6;
  --nadopuna-bg: rgba(164, 143, 214, 0.12);

  /* Na crnoj podlozi iste nijanse trebaju biti svjetlije da se vide. */
  --wh-nz: 148 163 184;
  --wh-so: 96 165 250;
  --wh-rij: 34 211 238;
  --wh-mak: 45 212 191;
  --wh-dub: 168 85 247;
  --wh-hv: 245 158 11;
  --wh-dis: 244 114 182;

  --grupa-tint: rgba(255, 255, 255, 0.015);
  --ytd-tint: rgba(110, 180, 130, 0.04);
  --naruci-tint: rgba(52, 211, 153, 0.04);
  --red-odabran: rgba(198, 145, 74, 0.16);

  color-scheme: dark;
}