/*
 * Grad Smederevo — dizajn tokeni (v4)
 *
 * Jedini izvor vrednosti za boje, tipografiju, razmake, oblike i pokret.
 * Komponente koriste SEMANTIČKE tokene (--color-*, --fs-*, --space-*, --radius-*),
 * a primitivne (--smd-*) samo kada uvode novi semantički token.
 *
 * Vizuelni jezik: državna plava na belim i svetlim plavo-sivim površinama, naslovi i verzal
 * u Montserratu, tekst u Open Sansu, skoro oštri uglovi i jedan brend gradijent (plava → noćna plava)
 * za pločice ikonica, dugmad, datume, zamenske slike i tamne površine. Preko fotografija
 * i videa isti gradijent ide kao providan preklop. Bez trobojke i ukrasnih motiva.
 * Parovi tekst/podloga provereni su za WCAG 2.2 AA — tabela je na strani
 * /dizajn-sistem/ i u DESIGN-SYSTEM.md.
 */

:root {
	/* ======================================================================
	   PRIMITIVI — boje
	   ====================================================================== */

	/* Kanali (-rgb) brend boja služe za providne nijanse, npr. rgb(var(--smd-blue-600-rgb) / 0.4).
	   Stoje odmah posle svog hex-a i imaju iste vrednosti. U ::backdrop kanal dobija i rezervnu
	   vrednost, rgb(var(--smd-navy-975-rgb, 8 18 41) / 0.6), jer ga stariji pregledači (Safari < 17.4,
	   Chrome < 122, Firefox < 120) ne nasleđuju. */

	/* Noćna plava — tamne površine (uvod, podnožje, preklop) */
	--smd-navy-975: #081229;
	--smd-navy-975-rgb: 8 18 41;
	--smd-navy-950: #0b1733;
	--smd-navy-900: #112349;
	--smd-navy-900-rgb: 17 35 73;
	--smd-navy-800: #1a3163;
	/* Senka zaglavlja kad se spusti pri skrolu (izvedena iz noćne plave 900) */
	--smd-navy-shadow: #0c1e3c;
	--smd-navy-shadow-rgb: 12 30 60;

	/* Državna plava (zastava) — primarna boja interfejsa */
	--smd-blue-800: #0a345f;
	--smd-blue-700: #0c4076; /* plava sa zastave */
	--smd-blue-700-rgb: 12 64 118;
	--smd-blue-600: #1a5596;
	--smd-blue-600-rgb: 26 85 150;
	--smd-blue-500: #2e6bb3;
	--smd-blue-500-rgb: 46 107 179;
	--smd-blue-400: #5b8fd0;
	--smd-blue-300: #9dbde6;
	--smd-blue-200: #cddcf0;
	--smd-blue-100: #e3ebf5;
	--smd-blue-50: #f1f5fa;

	/* Državna crvena (zastava) — akcenat */
	--smd-red-700: #a82d33;
	--smd-red-600: #c6363c; /* crvena sa zastave */
	--smd-red-50: #fbeeee;

	/* Neutralni */
	--smd-ink-950: #0e1523;
	--smd-ink-900: #141c2b;
	--smd-ink-800: #1f2937;
	--smd-ink-700: #333f50;
	--smd-ink-600: #4a5568;
	--smd-ink-500: #5a6778;
	--smd-ink-400: #7a8699;
	--smd-ink-300: #c8d0dc;
	--smd-ink-200: #dde3ec;
	--smd-ink-100: #e9eef6;
	--smd-ink-50: #f1f4f9;
	--smd-white: #ffffff;

	/* Stanja */
	--smd-green-700: #15803d;
	--smd-green-500: #22a55b;
	--smd-green-50: #ecf8f0;
	--smd-amber-700: #9a4a06;
	--smd-amber-500: #e8a317;
	--smd-amber-50: #fff6e5;

	/* ======================================================================
	   SEMANTIKA — boje
	   ====================================================================== */
	--color-bg: var(--smd-white);
	--color-bg-subtle: var(--smd-ink-50);
	--color-bg-muted: var(--smd-ink-100);
	--color-bg-inverse: var(--smd-navy-900);
	--color-surface: var(--smd-white);

	--color-text: var(--smd-ink-800);
	--color-text-strong: var(--smd-ink-900);
	--color-text-muted: var(--smd-ink-600);
	--color-text-subtle: var(--smd-ink-500);
	--color-heading: var(--smd-blue-700);

	--color-text-inverse: var(--smd-white);
	--color-text-inverse-muted: rgb(255 255 255 / 0.76);
	--color-text-inverse-subtle: rgb(255 255 255 / 0.72); /* ≥ 4,5:1 i na svetlijem kraju gradijenta */

	--color-link: var(--smd-blue-700);
	--color-link-hover: var(--smd-red-700);
	--color-link-inverse: var(--smd-blue-300);

	--color-primary: var(--smd-blue-700);
	--color-primary-hover: var(--smd-blue-800);
	--color-on-primary: var(--smd-white);
	--color-accent: var(--smd-red-600);

	--color-border: var(--smd-ink-200);
	--color-border-strong: var(--smd-ink-300);
	--color-border-input: var(--smd-ink-400);   /* ≥ 3:1 prema beloj */
	--color-border-inverse: rgb(255 255 255 / 0.16);

	--color-focus: var(--smd-blue-500);
	--color-focus-inverse: var(--smd-blue-300);
	--color-focus-ring: rgb(var(--smd-blue-500-rgb) / 0.28); /* senka oko polja u fokusu */

	/* Brend gradijent (plava → noćna plava) — jedan izvor za pločice ikonica, dugmad,
	   datume, zamenske slike i tamne pozadine; preko fotografija i videa ide sa providnošću
	   (iste boje: plava 600 = rgb(26 85 150), noćna plava 900 = rgb(17 35 73)). */
	--gradient-brand: linear-gradient(145deg, var(--smd-blue-600) 0%, var(--smd-navy-900) 100%);
	--gradient-brand-hover: linear-gradient(145deg, var(--smd-blue-500) 0%, var(--smd-navy-800) 100%);
	/* Dublja varijanta za veliku površinu bez fotografije (podnožje): isti smer, preko plave 700
	   do noćne plave 950. Najsvetlija tačka je i dalje plava 600, pa važe kontrasti brend gradijenta. */
	--gradient-brand-deep: linear-gradient(145deg, var(--smd-blue-600) 0%, var(--smd-blue-700) 35%, var(--smd-navy-900) 75%, var(--smd-navy-950) 100%);
	--shadow-brand: 0 8px 16px -10px rgb(var(--smd-blue-700-rgb) / 0.7);

	/* Stanja — tekst / podloga / jaka nijansa (tačka) */
	--color-urgent-text: var(--smd-red-700);
	--color-urgent-bg: var(--smd-red-50);
	--color-urgent-strong: var(--smd-red-600);
	--color-warning-text: var(--smd-amber-700);
	--color-warning-bg: var(--smd-amber-50);
	--color-warning-strong: var(--smd-amber-500);
	--color-success-text: var(--smd-green-700);
	--color-success-bg: var(--smd-green-50);
	--color-success-strong: var(--smd-green-500);
	--color-info-text: var(--smd-blue-700);
	--color-info-bg: var(--smd-blue-50);
	--color-info-strong: var(--smd-blue-500);
	--color-neutral-text: var(--smd-ink-700);
	--color-neutral-bg: var(--smd-ink-100);
	--color-neutral-strong: var(--smd-ink-400);

	/* ======================================================================
	   TIPOGRAFIJA — Montserrat (naslovi i verzal) + Open Sans (tekst)
	   ====================================================================== */
	--font-sans: "Open Sans", "Open Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-display: "Montserrat", "Montserrat Fallback", Arial, sans-serif;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Skala (rem → prati kontrolu veličine teksta i podešavanja pregledača) */
	--fs-2xs: 0.75rem;     /* 12 — oznake */
	--fs-xs: 0.875rem;     /* 14 — metapodaci */
	--fs-sm: 0.9375rem;    /* 15 — interfejs, dugmad, opisi */
	--fs-base: 1.0625rem;  /* 17 — osnovni tekst */
	--fs-md: 1.1875rem;    /* 19 — uvod, naslovi kartica */
	--fs-lg: 1.375rem;     /* 22 — H4 */
	--fs-xl: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);        /* 24→28 — H3 */
	--fs-2xl: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);      /* 28→36 — H2 (verzal) */
	--fs-3xl: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);        /* 36→52 — H1 */
	--fs-display: clamp(2.75rem, 1.5rem + 4.2vw, 5.25rem);  /* 44→84 — naslovna */

	--lh-tight: 1.02;
	--lh-snug: 1.15;
	--lh-ui: 1.35;
	--lh-normal: 1.65;

	--tracking-display: -0.01em;
	--tracking-heading: -0.01em;
	--tracking-tight: -0.01em;
	--tracking-caps: 0.04em;   /* Montserrat je širok — verzalu treba manje razmaka nego uskom fontu */
	--tracking-label: 0.1em;

	/* ======================================================================
	   RAZMACI (osnova 4/8 px)
	   ====================================================================== */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--section-space: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);

	/* ======================================================================
	   RASPORED
	   ====================================================================== */
	--container-max: 80rem;                                 /* 1280 */
	--container-pad: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
	--measure: 44rem;
	--tap: 2.75rem;                                         /* 44 px */

	/* Visina gornjeg dela (traka alata + zaglavlje) — uvod stranice ulazi ispod njega */
	--topbar-h: 2.75rem;
	--header-h: 5.25rem;
	--site-top-h: calc(var(--topbar-h) + var(--header-h));

	/* ======================================================================
	   OBLIK, SENKE, POKRET, SLOJEVI — skoro oštri uglovi (stil državne uprave)
	   ====================================================================== */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgb(20 28 43 / 0.05);
	--shadow-sm: 0 1px 3px rgb(20 28 43 / 0.08), 0 1px 2px rgb(20 28 43 / 0.04);
	--shadow-md: 0 2px 4px -1px rgb(20 28 43 / 0.06), 0 12px 24px -10px rgb(var(--smd-blue-700-rgb) / 0.22);
	--shadow-lg: 0 8px 16px -8px rgb(20 28 43 / 0.14), 0 28px 56px -24px rgb(var(--smd-blue-700-rgb) / 0.34);

	--ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
	--dur-fast: 140ms;
	--dur: 220ms;
	--dur-slow: 360ms;

	--z-top: 40;
	--z-dropdown: 60;
	--z-skip: 200;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur: 0ms;
		--dur-slow: 0ms;
	}
}