/**
 * Design tokens — boje i mapiranje na Elementor Kit ID-eve.
 * Izvor: mozaikod-palette-config.php
 */

:root {
	--color-bg: #ffffff;
	--color-text: #000000;
	--color-heading: #000000;
	--color-subtitle: #000000;
	--color-accent: #fab905;
	--color-accent-hover: #e6a900;
	--color-border: #e8e5dd;
  --color-bg-section: #f6f6f4;
	--color-bg-subtle: #faf9f6;
	--color-section-dark: #000000;
	--color-meta: #000000;
	--color-ink: #000000;
	--color-ink-muted: #000000;
	--color-ink-secondary: #000000;
	--color-ink-soft: #000000;
	--color-ink-hover: #000000;
	--color-error: #b42318;
	--color-border-light: #e8e5dd;
	--color-bg-muted: #faf9f6;
	--color-footer-deep: #080808;
	--color-footer-line: #d8d2c6;
	--color-footer-warm: #ebe4d7;
	--color-bg-alt: #fafafa;
	--color-bg-warm: #f2f1ee;

	/* Kompatibilnost (stari nazivi) */
	--color-white: var(--color-bg);
	--color-black: var(--color-heading);
	--color-yellow: var(--color-accent);
	--color-yellow-hover: var(--color-accent-hover);
	--color-bg-soft: var(--color-bg-section);
	--color-dark-section: var(--color-section-dark);
	--color-muted: var(--color-meta);

	--mozaikod-yellow: var(--color-accent);
	--mozaikod-yellow-hover: var(--color-accent-hover);
	--mozaikod-ink: var(--color-ink);
	--mozaikod-cream: var(--color-bg-section);
	--mozaikod-muted: var(--color-meta);
	--mozaikod-dark: var(--color-section-dark);

	--e-global-color-mozaikod_accent_1: var(--color-accent);
	--e-global-color-mozaikod_accent_2: var(--color-bg);
	--e-global-color-mozaikod_accent_3: var(--color-text);
	--e-global-color-mozaikod_accent_4: var(--color-border);
	--e-global-color-mozaikod_accent_5: var(--color-bg);
	--e-global-color-mozaikod_accent_6: var(--color-heading);
	--e-global-color-mozaikod_accent_7: var(--color-border);
	--e-global-color-mozaikod_accent_8: var(--color-subtitle);
	--e-global-color-mozaikod_sticky_header_bg: var(--color-section-dark);
	--e-global-color-a9cf77f: var(--color-heading);
	--e-global-color-8a42445: var(--color-bg);
	--e-global-color-c982301: var(--color-bg-section);

	--dbre-yellow: var(--color-accent);
	--dbre-yellow-hover: var(--color-accent-hover);
	--dbre-black: var(--color-heading);
	--dbre-line: var(--color-border);
	--dbre-soft: var(--color-bg-section);

	--mozaikod-font-body: "Manrope", Inter, system-ui, sans-serif;
	--mozaikod-font-display: "Space Grotesk", Manrope, system-ui, sans-serif;
	--mozaikod-font-kicker: var(--mozaikod-font-body);
	--mozaikod-hero-font: var(--mozaikod-font-display);

	--mozaikod-layout-width: min(1220px, calc(100% - 56px));
	--mozaikod-layout-gutter: clamp(20px, 4vw, 32px);
	--mozaikod-header-height: 80px;

	/* Usluge hero — razmaci ispod menija (desktop geometrija) */
	--mzk-service-hero-copy-top: 90px;
	--mzk-service-hero-visual-top: 50px;
	--mzk-service-hero-inline-start: 100px;
	--mzk-service-hero-copy-max: 600px;
	--mzk-service-hero-column-gap: 100px;
	--mzk-service-hero-image-height: 450px;
	--mzk-service-hero-bottom-gap: 60px;
	--mzk-service-hero-kicker-title-gap: 16px;
}