/*
 * Pametnebrave Widgets: zajednički tokeni.
 *
 * Paleta (jedini izvor boja na webu). Iste nazive i vrijednosti imaju Elementor V4 globalne varijable
 * (Site Settings > Variables), koje Elementor ispisuje na :root. Ovdje su pod :where(:root), bez specifičnosti,
 * pa vrijednost iz Elementora uvijek ima prednost, a ovo vrijedi samo kao rezerva.
 *
 * Pravila:
 * - --accent (#20A6B3, odluka korisnika 2026-10-30) je boja gumba i akcija, s bijelim tekstom.
 *   Hover --accent-hover, pritisak --accent-active. Isti ton je --accent-brand (linkovi na crnom).
 * - #20A6B3 se ne koristi kao tekst na bijelom ili sivom (premali kontrast); za to je --accent-hover.
 * - Linkovi na svijetlom: --accent-hover. Na crnom: --accent-brand.
 * - --text-tertiary samo za placeholder i pravne tekstove.
 */
:where(:root) {
	--accent-brand: #20A6B3;
	--accent: #20A6B3;
	--accent-hover: #157A84;
	--accent-active: #126C75;

	--bg: #FFFFFF;
	--bg-alt: #F5F5F7;
	--fill: #E8E8ED;
	--border: #D2D2D7;

	--text: #1D1D1F;
	--text-secondary: #6E6E73;
	--text-tertiary: #86868B;

	--bg-dark: #000000;
	--surface-dark: #1D1D1F;
	--text-on-dark: #F5F5F7;
	--text-on-dark-2: #A1A1A6;

	--success: #008009;
	--warning: #B64400;
	--error: #E30000;
}

:root,
body {
	/* Tekst na --accent (= --bg) */
	--on-accent: var(--bg);
	/* Pozadina sive sekcije (izračunata ovdje, pa je unutar sekcije ne mijenja lokalni --bg-alt) */
	--pb-sec-alt: var(--bg-alt);

	/* Stari nazivi (widgeti, Elementor custom CSS): pokazuju na paletu */
	--pbw-teal: var(--accent);
	--pbw-teal-deep: var(--surface-dark);
	--pbw-ink: var(--text);
	--pbw-accent: var(--accent);
	--pbw-teal-text: var(--accent-hover);
	--pbw-accent-hover: var(--accent-hover);
	--pbw-muted: var(--text-secondary);
	--pbw-line: var(--border);
	--pbw-line-2: var(--border);
	--pbw-tile: var(--bg-alt);
	--pbw-teal-darkest: var(--bg-dark);
	--pbw-teal-light: var(--border);
	--pbw-white: var(--bg);

	/* Stari nazivi Elementor V4 varijabli (prije 2026-10-30), za eventualne zaostale reference */
	--pb-ink: var(--text);
	--pb-muted: var(--text-secondary);
	--pb-dark-muted: var(--text-secondary);
	--pb-line: var(--border);
	--pb-line-2: var(--border);
	--pb-tile: var(--bg-alt);
	--pb-white: var(--bg);
	--pb-teal: var(--accent);
	--pb-accent: var(--accent);
	--pb-accent-hover: var(--accent-hover);
	--pb-teal-text: var(--accent-hover);
	--pb-teal-deep: var(--surface-dark);
	--pb-teal-darkest: var(--bg-dark);
	--pb-teal-light: var(--border);
	--pb-teal-soft: var(--bg-alt);

	--pbw-f-display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pbw-f-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pbw-f-mono: ui-monospace, "SF Mono", Consolas, monospace;

	--pbw-r: 8px;
	--pbw-r-lg: 14px;
	/* Bez sjena (kartice su ravne, odvaja ih pozadina) */
	--pbw-shadow: none;
}

/* Klase pbw-hide-* (skrivanje ispod širine) su u pbw-global.css. */

/* Fokus: 2px --accent, razmak 2px. Na crnim površinama --accent-brand. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:where(.pb-dark, .pbw-eh__banner, .pbw-hero) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--accent-brand);
}