/* ============================================================
   KUPIAUTO.HR ADMIN — design tokeni (Materio stil, vlastita izrada)
   Paleta "Racing Red": carbon crna / F1 crvena / amber žuta.
   Jedini izvor istine za boje/velicine. Light + dark.
   ============================================================ */
:root {
  /* fontovi */
  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs: .875rem; --fs-md: .9375rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-stat: 1.5rem;

  /* razmaci / radijusi / sjene */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --r-sm: .288rem; --r: .425rem; --r-lg: .5rem; --r-pill: 2rem;
  --elev-1: 0 2px 4px rgba(20, 20, 26, .06), 0 1px 2px rgba(20, 20, 26, .08);
  --elev-2: 0 4px 8px rgba(20, 20, 26, .1), 0 2px 4px rgba(20, 20, 26, .06);
  --elev-pop: 0 8px 24px rgba(20, 20, 26, .16);

  /* dimenzije shell-a */
  --nav-w: 15.625rem; --nav-w-mini: 4.25rem; --appbar-h: 3.875rem;

  /* brend palette — Racing Red (iste u oba tipke) */
  --c-primary: #e10600;   /* F1 crvena */
  --c-primary-d: #b80500; /* hover */
  --c-primary-l: #ff7a72; /* svijetli ton */
  --c-success: #00c758;   /* staze zelena */
  --c-warning: #ffc300;   /* amber kocka za start */
  --c-error:   #ff3d71;   /* rose — da se ne kocka s brand crvenom */
  --c-info:    #00cfe8;   /* zadrzi (cilna) */
  --c-secondary: #646472; /* grafite */
  --c-grey: #a3a3ae;
  --on-warning: #26200a;  /* tekst na punoj amber */

  /* izvori oglasa — u paleti, medjusobno razliciti */
  --src-nju:  #ffc300;   /* zlatni */
  --src-idx:  #00cfe8;   /* cilna */
  --src-auti: #00c758;   /* staze zelena */
  --src-as24: #ff7a1a;   /* racing naranja */
}

/* ---------- LIGHT ---------- */
:root, html[data-theme="light"] {
  --bg: #f6f6f8;
  --surface: #ffffff;
  --surface-2: #f5f4f6;              /* hover/zebra */
  --surface-3: #edecee;              /* aktivni/darker */
  --line: #e6e5e8;                   /* obrubi */
  --txt: #24242c;                    /* carbon tinta */
  --txt-2: #5d5d68;                  /* sekundarni */
  --txt-3: #a3a3ae;                  /* mutni */
  --on-primary: #ffffff;
  --primary-soft: rgba(225, 6, 0, .13);
  --success-soft: rgba(0, 199, 88, .15);
  --warning-soft: rgba(255, 195, 0, .2);
  --error-soft: rgba(255, 61, 113, .14);
  --info-soft: rgba(0, 207, 232, .15);
  --secondary-soft: rgba(100, 100, 114, .13);
  --grey-soft: rgba(163, 163, 174, .2);
  --nav-bg: #ffffff;
  --appbar-bg: rgba(255, 255, 255, .82);
  --overlay: rgba(24, 24, 30, .45);
  --chart-grid: #ecebec;
  color-scheme: light;
}

/* ---------- DARK — carbon kokpit ---------- */
html[data-theme="dark"] {
  --bg: #16161c;
  --surface: #1f1f27;
  --surface-2: #24242d;
  --surface-3: #2b2b35;
  --line: #30303a;
  --txt: #ececf2;
  --txt-2: #b7b7c2;
  --txt-3: #6f6f7c;
  --primary-soft: rgba(225, 6, 0, .26);
  --success-soft: rgba(0, 199, 88, .2);
  --warning-soft: rgba(255, 195, 0, .18);
  --error-soft: rgba(255, 61, 113, .2);
  --info-soft: rgba(0, 207, 232, .16);
  --secondary-soft: rgba(140, 140, 155, .18);
  --grey-soft: rgba(111, 111, 124, .25);
  --nav-bg: #1b1b23;
  --appbar-bg: rgba(22, 22, 28, .82);
  --overlay: rgba(6, 6, 8, .68);
  --chart-grid: #2a2a34;
  --elev-1: 0 2px 4px rgba(6, 6, 8, .34), 0 1px 2px rgba(6, 6, 8, .4);
  --elev-2: 0 4px 10px rgba(6, 6, 8, .45);
  --elev-pop: 0 8px 28px rgba(6, 6, 8, .6);
  color-scheme: dark;
}