/* =============================================================================
   theme.css - NooBot Community | tokeni sajta
   -----------------------------------------------------------------------------
   Jedino mesto gde stoje boje. Paleta je preuzeta iz zvanicnog dizajn sistema
   servera (cef/https-ui/nb_ui.css) i prosirena onim sto sajtu treba a in-game
   UI nema (linkovi, tabele, senke po sekcijama, pozadine stranica).

   NooBot je primarna tema i stoji u :root - to znaci da radi i pre nego sto se
   JS izvrsi, i da je to ono sto se vidi ako localStorage nije podesen.

   Kako se dodaje jos jedna tema
   -----------------------------
   1. Kopiraj blok `html[data-theme="midnight"]` pod novim imenom.
   2. Promeni vrednosti - imena tokena ostaju ista, nista drugo se ne dira.
   3. Dopisi je u NB_THEMES na vrhu js/theme.js (id, naziv, ikona).
   Selektor `html[data-theme="x"]` je specificniji od `:root`, pa uvek pobedi.

   Stranice NIKAD ne pisu golu boju. Ako neka nijansa fali, dodaje se token
   ovde pa se koristi - inace nova tema ne moze da je promeni.
   ========================================================================== */

/* =============================================================================
   1. TOKENI NEZAVISNI OD TEME - geometrija, tipografija, kretanje
   ========================================================================== */
:root {
	/* radijusi - iz nb_ui.css */
	--r-xs: 4px;
	--r-sm: 8px;
	--r: 12px;
	--r-lg: 16px;
	--r-xl: 20px;
	--r-pill: 999px;
	/* stari naziv, jos se koristi ponegde */
	--border-radius: var(--r);

	/* tipografija */
	--font-ui: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

	/* kretanje */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--fast: .15s;
	--mid: .28s;
	--slow: .45s;
}

/* =============================================================================
   2. NOOBOT - primarna tema (default, zato je u :root)
   ========================================================================== */
:root {
	color-scheme: dark;

	/* ── povrsine ── */
	--bg-dark: #121212;
	--bg-primary: #161616;
	--bg-secondary: #1c1c1c;
	--bg-tertiary: #222222;
	--bg-inset: rgba(255, 255, 255, .025);
	--bg-inset-hi: rgba(255, 255, 255, .05);
	--bg-sunken: #0e0e0e;
	--bg-overlay: rgba(10, 10, 10, .78);

	/* ── linije ── */
	--border-color: #262626;
	--border-light: #333333;
	--border-hairline: rgba(255, 255, 255, .06);
	--border-brand: rgba(92, 0, 0, .55);

	/* ── tekst ── */
	--text-primary: #f2f2f2;
	--text-heading: #ffffff;
	--text-secondary: #b9b9b9;
	--text-muted: #8a8a8a;
	--text-faint: #6d6d6d;
	--text-on-accent: #ffffff;

	/* ── brend ── */
	--red-dark: #5c0000;
	--red-primary: #9a1515;
	--red-accent: #b41e1e;
	--red-light: #d42020;
	--accent-tint: #b07070;

	/* Boja teksta linka.
	   Brend crvena (--red-light) na tamnoj podlozi daje odnos 3.59:1, a za
	   obican tekst treba najmanje 4.5:1 - deo ljudi taj tekst prosto ne procita.
	   Ova nijansa daje 5.16 na #121212 i 4.69 na #1c1c1c, a i dalje je crvena.
	   Povrsine i dugmad zadrzavaju --red-accent: tamo je par bela-na-crvenoj
	   i on prolazi 8.5:1. */
	--link: #e05a5a;
	--link-hover: #f28a8a;
	--accent-glow: rgba(180, 30, 30, .45);
	--accent-soft: rgba(92, 0, 0, .22);
	--accent-wash: rgba(180, 30, 30, .12);
	--accent-grad: linear-gradient(135deg, #9a1515 0%, #5c0000 100%);
	--accent-grad-hi: linear-gradient(135deg, #d42020 0%, #7a0505 100%);

	/* Povrsine koje nose brend a ne treba da vicu: zaglavlje igraca, aktivni
	   tab, battlepass dugme. Ranije su koristile isti puni gradijent kao
	   dugmad, pa su na velikoj povrsini udarale u oci. --accent-grad ostaje
	   za prava dugmad poziva na akciju (Objavi, Prijavi se, Doniraj). */
	--surface-accent: linear-gradient(135deg, #3d0e0e 0%, #5e1818 100%);
	--surface-accent-hover: linear-gradient(135deg, #4d1414 0%, #75201f 100%);
	--surface-accent-border: rgba(180, 30, 30, .30);

	/* Stepenik izmedju --accent-grad i --surface-accent. Za dugmad koja jesu
	   poziv na akciju ali stoje usred sadrzaja, gde pun gradijent odskace:
	   Objavi, Objavi glasanje. */
	--accent-grad-dim: linear-gradient(135deg, #7d1111 0%, #4a0505 100%);
	--accent-grad-dim-hover: linear-gradient(135deg, #911616 0%, #5c0000 100%);

	/* Gole komponente boje, za slucajeve gde treba proizvoljna providnost:
	   rgba(var(--accent-rgb), .18). Bez ovoga je svaki takav zapis morao da
	   bude zakucan broj, pa je u plavoj temi ostajao crven. */
	--accent-rgb: 180, 30, 30;
	--accent-dark-rgb: 92, 0, 0;
	/* Boja stranice, u komponentama. Sluzi da se hero na dnu ugasi tacno u
	   podlogu koja ide ispod njega, bez vidljivog sava. */
	--bg-dark-rgb: 18, 18, 18;
	--bad-rgb: 232, 85, 85;
	--good-rgb: 78, 207, 138;
	--gold-rgb: 228, 180, 41;
	--blue-rgb: 91, 159, 212;

	/* Odziv na prelaz misem. Ranije je svaka kartica na hover dobijala okvir
	   pune brend boje, sto je na spisku od dvadeset kartica bilo prejako.
	   Sada je okvir samo natrunjen bojom, a dubina dolazi od jedva vidljivog
	   sjaja. Menja se na jednom mestu, za ceo sajt. */
	--border-hover: rgba(var(--accent-rgb), .40);
	--glow-hover: 0 0 14px rgba(var(--accent-rgb), .13);

	/* ── semantika ── */
	--good: #4ecf8a;
	--good-dim: #1f6b45;
	--bad: #e85555;
	--bad-dim: #c0392b;
	--gold: #e4b429;
	--gold-dim: #8a6c11;
	--blue: #5b9fd4;
	--blue-dim: #2c5a7d;

	/* Znacenjske podloge - ostaju iste u svakoj temi. Odbijeno, oflajn,
	   odjava i upozorenje su crveni jer to znace, ne zato sto je tema crvena. */
	--good-wash: rgba(78, 207, 138, .15);
	--bad-wash: rgba(232, 85, 85, .15);
	--bad-soft: rgba(232, 85, 85, .30);
	--gold-wash: rgba(228, 180, 41, .15);

	/* ── senke ── */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
	--shadow: 0 10px 30px rgba(0, 0, 0, .45);
	--shadow-lg: 0 24px 70px rgba(0, 0, 0, .60);
	--shadow-accent: 0 8px 26px rgba(180, 30, 30, .45);
	--ring-accent: 0 0 0 3px rgba(180, 30, 30, .22);

	/* Pozadina hero dela na pocetnoj. Ista scena u dve varijante, po temi.

	   --hero-bg     ide svuda: JPEG, radi u svakom pregledacu.
	   --hero-bg-2   je isti kadar u WebP formatu, upola lakse. Koristi se samo
	                 tamo gde `image-set()` postoji - vidi @supports u
	                 css/page-home.css. Bez te ograde bi pregledac koji ne zna
	                 image-set odbacio celu deklaraciju i hero bi ostao bez slike.

	   Fajlovi stoje u /css/hero/, a ne u /images/, namerno: na test serveru je
	   /images simbolicka veza ka produkciji, pa bi upis tamo zavrsio na pravom
	   sajtu. */
	--hero-bg:
		url('/css/hero/hero-noobot.jpg') center/cover no-repeat,
		linear-gradient(160deg, #1a1010 0%, #121212 48%, #0b0808 100%);
	--hero-bg-2:
		image-set(url('/css/hero/hero-noobot.webp') type('image/webp'),
		          url('/css/hero/hero-noobot.jpg') type('image/jpeg')) center/cover no-repeat,
		linear-gradient(160deg, #1a1010 0%, #121212 48%, #0b0808 100%);

	/* ── pozadinski efekti stranice ── */
	--page-glow-1: radial-gradient(ellipse 900px 520px at 12% -6%, rgba(92, 0, 0, .28), transparent 62%);
	--page-glow-2: radial-gradient(ellipse 760px 460px at 92% 8%, rgba(154, 21, 21, .14), transparent 60%);
	--page-grid-line: rgba(255, 255, 255, .022);
	--scanline: rgba(255, 255, 255, .010);

	/* legacy nazivi iz stare teme - da nista ne ostane bez vrednosti */
	--gray-accent: #8a8a8a;
	--gray-dark: #5a5a5a;
	--gray-light: #b9b9b9;
	--red-hover: #d42020;
}

/* =============================================================================
   3. MIDNIGHT - druga tema (dokaz da se paleta menja na jednom mestu)
   ========================================================================== */
html[data-theme="midnight"] {
	color-scheme: dark;

	--bg-dark: #0b0f16;
	--bg-primary: #101722;
	--bg-secondary: #151d2b;
	--bg-tertiary: #1c2637;
	--bg-inset: rgba(255, 255, 255, .025);
	--bg-inset-hi: rgba(255, 255, 255, .05);
	--bg-sunken: #080c12;
	--bg-overlay: rgba(8, 12, 18, .78);

	--border-color: #1f2a3a;
	--border-light: #2b3a4f;
	--border-hairline: rgba(255, 255, 255, .06);
	--border-brand: rgba(30, 90, 140, .55);

	--text-primary: #eef3f9;
	--text-heading: #ffffff;
	--text-secondary: #adbccd;
	--text-muted: #7d8da0;
	--text-faint: #5f6d80;
	--text-on-accent: #04121e;

	--red-dark: #0f4c75;
	--red-primary: #1b6ca8;
	--red-accent: #3fa7d6;
	--red-light: #6cc5ec;
	--accent-tint: #7fa8c4;
	--link: #6cc5ec;
	--link-hover: #a5ddf5;
	--accent-glow: rgba(63, 167, 214, .40);
	--accent-soft: rgba(15, 76, 117, .28);
	--accent-wash: rgba(63, 167, 214, .12);
	--accent-grad: linear-gradient(135deg, #3fa7d6 0%, #0f4c75 100%);
	--accent-grad-hi: linear-gradient(135deg, #6cc5ec 0%, #14608f 100%);

	/* Plava manje udara u oci od crvene, pa je stisavanje blaze. */
	--surface-accent: linear-gradient(135deg, #10344f 0%, #1c5680 100%);
	--surface-accent-hover: linear-gradient(135deg, #144063 0%, #226a9d 100%);
	--surface-accent-border: rgba(63, 167, 214, .32);

	--accent-grad-dim: linear-gradient(135deg, #2b7fa8 0%, #0c3c5c 100%);
	--accent-grad-dim-hover: linear-gradient(135deg, #3492bf 0%, #0f4c75 100%);

	--accent-rgb: 63, 167, 214;
	--accent-dark-rgb: 15, 76, 117;
	--bg-dark-rgb: 11, 15, 22;

	--good: #4ecf8a;
	--good-dim: #1f6b45;
	--bad: #e85555;
	--bad-dim: #c0392b;
	--gold: #e4b429;
	--gold-dim: #8a6c11;
	--blue: #5b9fd4;
	--blue-dim: #2c5a7d;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
	--shadow: 0 10px 30px rgba(0, 0, 0, .45);
	--shadow-lg: 0 24px 70px rgba(0, 0, 0, .60);
	--shadow-accent: 0 8px 26px rgba(63, 167, 214, .40);
	--ring-accent: 0 0 0 3px rgba(63, 167, 214, .22);

	--hero-bg:
		url('/css/hero/hero-midnight.jpg') center/cover no-repeat,
		linear-gradient(160deg, #101a26 0%, #0b0f16 48%, #070a10 100%);
	--hero-bg-2:
		image-set(url('/css/hero/hero-midnight.webp') type('image/webp'),
		          url('/css/hero/hero-midnight.jpg') type('image/jpeg')) center/cover no-repeat,
		linear-gradient(160deg, #101a26 0%, #0b0f16 48%, #070a10 100%);

	--page-glow-1: radial-gradient(ellipse 900px 520px at 12% -6%, rgba(15, 76, 117, .34), transparent 62%);
	--page-glow-2: radial-gradient(ellipse 760px 460px at 92% 8%, rgba(63, 167, 214, .12), transparent 60%);
	--page-grid-line: rgba(255, 255, 255, .022);
	--scanline: rgba(255, 255, 255, .010);

	--gray-accent: #7d8da0;
	--gray-dark: #55637a;
	--gray-light: #adbccd;
	--red-hover: #6cc5ec;
}

/* =============================================================================
   4. ZAJEDNICKI SLOJ - stvari koje zavise samo od tokena
   ========================================================================== */

/* Pozadina cele stranice: dva brend sjaja + jedva vidljiva mreza.
   Sve su slojevi jednog `background`-a, ne pseudo-element - tako ne ulazi u
   slaganje po z-osi i ne moze da prekrije sadrzaj. `fixed` znaci da pri skrolu
   miruje, pa duge stranice nemaju sav u pozadini. */
html {
	background: var(--bg-dark);
}

body {
	background:
		var(--page-glow-1),
		var(--page-glow-2),
		linear-gradient(var(--page-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--page-grid-line) 1px, transparent 1px),
		var(--bg-dark);
	background-size: auto, auto, 56px 56px, 56px 56px, auto;
	background-attachment: fixed;
}

/* Prelaz pri promeni teme - kratak, samo boje. */
html.theme-switching,
html.theme-switching body,
html.theme-switching .navbar,
html.theme-switching .footer,
html.theme-switching .card {
	transition: background-color var(--mid) ease, color var(--mid) ease, border-color var(--mid) ease;
}

/* Odabir teksta u brend boji. */
::selection {
	background: var(--red-primary);
	color: #fff;
}

/* Traka za skrolovanje. */
* {
	scrollbar-color: var(--red-dark) var(--bg-primary);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-sunken);
}

::-webkit-scrollbar-thumb {
	background: var(--red-dark);
	border: 2px solid var(--bg-sunken);
	border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--red-accent);
}

/* Fokus - vidljiv, u brend boji, nikad ne pomera raspored. */
:focus-visible {
	outline: 2px solid var(--red-accent);
	outline-offset: 2px;
}