/* Unified Billing — design tokens (pilot).
   OKLCH palette, light + dark. Dark je opt-in: dodaj data-theme="dark" na <html> ili .admin-content.
   Varijable su aditivne; postojeći CSS radi i bez njih. */
:root {
  /* tipografija: sistemski stack = oštro, brzo, bez webfont troška */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* razmak (4px skala) i oblik */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 14px;

  /* tip-skala (10 stepeni). Tijelo/kontrole tačne; naslovi snapani na najbliži korak. */
  --text-2xs:  10px;  /* mikro-labele, eyebrow, th */
  --text-xs:   11px;  /* meta, caption */
  --text-sm:   12px;  /* sekundarni tekst, kontrole */
  --text-base: 13px;  /* osnovni tekst */
  --text-md:   15px;  /* naglašen tekst */
  --text-lg:   16px;  /* naslovi panela */
  --text-xl:   19px;  /* sekcijski naslovi */
  --text-2xl:  23px;  /* pod-naslovi stranice, veliki brojevi */
  --text-3xl:  27px;  /* naslov stranice */
  --text-4xl:  32px;  /* hero broj */
  --shadow-sm: 0 1px 2px oklch(45% .07 250 / .08);
  --shadow:    0 5px 22px oklch(45% .07 250 / .06);

  /* brend (naša plava #0968a4 ≈ oklch(49% .11 242)) */
  --primary:     oklch(49% .11 242);
  --primary-700: oklch(43% .10 242);
  --primary-weak: oklch(49% .11 242 / .12);
  --focus-ring:  oklch(49% .11 242);
  --on-primary:  oklch(100% 0 0);              /* tekst na primarnoj dugmadi (svijetlo: bijel) */

  /* površine i tekst */
  --canvas:         oklch(97% .006 240);       /* f5f7fb — pozadina iza kartica */
  --surface:        oklch(100% 0 0);          /* #fff */
  --surface-2:      oklch(98.3% .004 240);    /* f8fbfe */
  --surface-raised: oklch(97.4% .006 240);    /* f4f8fc header/zebra */
  --row-hover:      oklch(96.5% .018 240);
  --border:         oklch(92.5% .012 240);    /* e1e8f0 */
  --border-soft:    oklch(94.5% .010 240);
  --text:           oklch(27% .04 250);       /* 192b43 */
  --text-muted:     oklch(50% .03 250);       /* 52657c */
  --code-bg:        oklch(95.5% .012 240);

  /* semantički statusi (ujednačen kontrast u OKLCH) */
  --ok-bg:   oklch(95% .05 150);  --ok-fg:   oklch(43% .12 150);
  --bad-bg:  oklch(95% .04 25);   --bad-fg:  oklch(50% .19 27);
  --warn-bg: oklch(96% .06 75);   --warn-fg: oklch(48% .12 70);
}

:root[data-theme="dark"], .admin-content[data-theme="dark"] {
  --primary:     oklch(70% .13 242);
  --primary-700: oklch(76% .12 242);
  --primary-weak: oklch(70% .13 242 / .18);
  --focus-ring:  oklch(78% .12 242);
  --on-primary:  oklch(22% .02 255);           /* dark: primary je svjetliji, pa taman tekst za kontrast */

  --canvas:         oklch(16% .012 255);       /* tamnija od surface, pozadina */
  --surface:        oklch(21% .012 255);      /* ~#15171d */
  --surface-2:      oklch(24% .012 255);
  --surface-raised: oklch(27% .012 255);
  --row-hover:      oklch(30% .014 255);
  --border:         oklch(33% .012 255);      /* ~#23252d */
  --border-soft:    oklch(29% .012 255);
  --text:           oklch(93% .01 250);
  --text-muted:     oklch(72% .02 250);
  --code-bg:        oklch(28% .012 255);

  --ok-bg:   oklch(32% .06 150);  --ok-fg:   oklch(85% .12 150);
  --bad-bg:  oklch(32% .07 27);   --bad-fg:  oklch(84% .13 27);
  --warn-bg: oklch(34% .07 75);   --warn-fg: oklch(87% .12 85);
}