/* =========================================================
   BLOK 1: TOKENI, /app
   Izvor: usluzionica-site/site-design/kod/tokeni.css (sajt) +
   UsluzionicaApp/wwwroot/css/brand-tokens.css (aplikacija).
   Imena sa sajta su glavna. Aplikacija ih nasleđuje u celosti;
   ovde su dodati samo tokeni koji su aplikaciji potrebni, a
   sajtu nisu (stanja, skelet, oznaka sa brojem, boost).

   Tema: <html data-theme="dark|light|system">. "system" prati
   uređaj. Na kanvasu se isti atribut stavlja na koren table,
   zato selektori nisu vezani samo za :root.
   ========================================================= */

:root,
[data-theme="dark"] {
  --us-bg: #0B1220;          --us-fg: #F8FAFC;
  --us-bg2: #0E1728;         --us-fg-muted: #A9B6CA;
  --us-surface: #162238;     --us-fg-subtle: #8A98B0;
  --us-surface2: #1B2A47;    --us-border: #22304E;
  --us-border-soft: #182238;
  --us-accent: #69A8FF;      --us-accent-cta: #2F6BFF;
  --us-na-cta: #FFFFFF;
  --us-tint: rgba(47,107,255,.14);
  --us-mark1: #2F6BFF;       --us-mark2: #69A8FF;

  /* Poslovi: orhideja, samo za drugu polovinu platforme */
  --us-posao: #E879F9;       --us-posao-jak: #C026D3;
  --us-posao-tint: rgba(192,38,211,.16);

  /* Boost: lajm, samo za plaćeno isticanje */
  --us-boost-fg: #D9F99D;    --us-boost-chip: rgba(217,249,157,.10);
  --us-boost-ivica: rgba(217,249,157,.30);
  --us-boost-polje: #D9F99D; --us-boost-munja: #365314;

  /* Stanja (novo za /app, iz brand-tokens.css) */
  --us-ok-bg: #10291B;       --us-ok-fg: #4ADE80;
  --us-warn-bg: #2C2011;     --us-warn-fg: #FBBF24;
  --us-err-bg: #2C1517;      --us-err-fg: #F87171;
  --us-info-bg: #11253D;     --us-info-fg: #38BDF8;

  /* Oznaka sa brojem. #EF4444 iz aplikacije sa belim tekstom daje 3,8:1,
     što pada AA za 11 px; #DC2626 daje 4,8:1 i čita se kao ista crvena. */
  --us-oznaka: #DC2626;

  /* Skelet (novo): dve stepenice, da se vidi oblik i unutar kartice */
  --us-skelet: #1B2A47;      --us-skelet2: #22304E;

  --us-shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --us-shadow-md: 0 18px 48px rgba(0,0,0,.45);
  --us-senka-podignuta: 0 22px 48px rgba(0,0,0,.5);
  --us-zatamnjenje: rgba(7,11,20,.62);
  color-scheme: dark;
}

:root[data-theme="light"],
[data-theme="light"] {
  --us-bg: #F7FAFC;          --us-fg: #0F172A;
  --us-bg2: #FFFFFF;         --us-fg-muted: #475569;
  --us-surface: #FFFFFF;     --us-fg-subtle: #64748B;
  --us-surface2: #F1F5F9;    --us-border: #E2E8F0;
  --us-border-soft: #EEF2F7;
  --us-accent: #2456CC;      --us-accent-cta: #2F6BFF;
  --us-na-cta: #FFFFFF;
  --us-tint: #E9F2FF;
  --us-mark1: #0E2F8C;       --us-mark2: #2463D8;
  --us-posao: #A21CAF;       --us-posao-jak: #C026D3;
  --us-posao-tint: #FAE8FF;
  --us-boost-fg: #365314;    --us-boost-chip: #F4FCE3;
  --us-boost-ivica: #D9F99D;
  --us-boost-polje: #D9F99D; --us-boost-munja: #365314;
  --us-ok-bg: #DCFCE7;       --us-ok-fg: #15803D;
  --us-warn-bg: #FEF3C7;     --us-warn-fg: #92400E;
  --us-err-bg: #FEF2F2;      --us-err-fg: #DC2626;
  --us-info-bg: #EFF6FF;     --us-info-fg: #0369A1;
  --us-oznaka: #DC2626;
  --us-skelet: #E8EDF3;      --us-skelet2: #DCE3EC;
  --us-shadow-sm: 0 2px 8px rgba(15,23,42,.06);
  --us-shadow-md: 0 18px 48px rgba(15,23,42,.10);
  --us-senka-podignuta: 0 18px 40px rgba(15,23,42,.14);
  /* na svetloj temi zatamnjenje je hladno sivo, ne crno */
  --us-zatamnjenje: rgba(15,23,42,.28);
  color-scheme: light;
}

/* Tokeni koji ne zavise od teme */
:root,
[data-theme] {
  --us-radius-xs: 8px;  --us-radius-sm: 12px; --us-radius-md: 16px;
  --us-radius-lg: 18px; --us-radius-xl: 24px; --us-radius-pill: 9999px;
  --us-font: "Outfit", system-ui, sans-serif;
  --us-tracking-tight: -0.03em; --us-tracking-normal: -0.005em; --us-tracking-wide: 0.04em;

  /* Pokret, 05-pokret.md */
  --us-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --us-ease-izlaz: cubic-bezier(0.4, 0, 1, 1);
  --us-t-mikro: 160ms;
  --us-t-stanje: 240ms;
  --us-t-ulaz: 360ms;
  --us-t-sekcija: 520ms;
  --us-t-izlaz: 180ms;

  /* Raspored ljuske (novo) */
  --us-traka-siroka: 248px;
  --us-traka-uska: 72px;
  --us-vrh-visina: 64px;
  --us-sadrzaj-max: 1180px;
  --us-tekst-max: 720px;
}