/*
 * Design tokens — single source of truth.
 *
 * Kada finalni dizajn stigne sa Figme, OVO je fajl koji se mijenja.
 * Sve komponente referenciraju isključivo CSS varijable iz :root —
 * promjenom jedne vrijednosti reskinuje cijeli sajt.
 */

:root {
	/* === BOJE — palette zastave BiH + neutralni dark theme === */
	--color-bg:           #0C0C0C;
	--color-bg-alt:       #131313;
	--color-bg-elev:      #1A1A1A;
	--color-surface:      #1F1F1F;
	--color-border:       rgba(238, 235, 228, 0.08);
	--color-border-strong: rgba(238, 235, 228, 0.18);

	--color-fg:           #EEEBE4;
	--color-fg-muted:     rgba(238, 235, 228, 0.62);
	--color-fg-dim:       rgba(238, 235, 228, 0.38);

	--color-accent:       #F5C400;   /* žuta zastave */
	--color-accent-hover: #FFD41E;
	--color-accent-fg:    #0C0C0C;

	--color-blue:         #1B3A6B;   /* plava zastave */
	--color-blue-hover:   #234B89;

	--color-danger:       #E5484D;
	--color-success:      #46A758;

	/* === TIPOGRAFIJA === */
	--font-sans:  'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;

	--fs-xs:      0.75rem;
	--fs-sm:      0.875rem;
	--fs-base:    1rem;
	--fs-md:      1.125rem;
	--fs-lg:      1.25rem;
	--fs-xl:      1.5rem;
	--fs-2xl:     2rem;
	--fs-3xl:     2.75rem;
	--fs-4xl:     3.75rem;
	--fs-5xl:     5rem;

	--lh-tight:   1.08;
	--lh-snug:    1.3;
	--lh-base:    1.6;
	--lh-loose:   1.9;

	--ls-tight:   -0.015em;
	--ls-wide:    0.18em;
	--ls-x-wide:  0.28em;

	/* === SPACING === */
	--space-1:    0.25rem;
	--space-2:    0.5rem;
	--space-3:    0.75rem;
	--space-4:    1rem;
	--space-5:    1.25rem;
	--space-6:    1.5rem;
	--space-7:    2rem;
	--space-8:    2.5rem;
	--space-9:    3rem;
	--space-10:   4rem;
	--space-12:   5rem;
	--space-14:   6rem;
	--space-16:   8rem;

	/* === LAYOUT === */
	--container-max:       1200px;
	--container-narrow:    760px;
	--header-h:            72px;
	--radius-sm:           6px;
	--radius:              12px;
	--radius-lg:           20px;
	--radius-pill:         999px;

	/* === MOTION === */
	--ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in:    cubic-bezier(0.55, 0, 0.7, 0.2);
	--dur-fast:   140ms;
	--dur-base:   240ms;
	--dur-slow:   480ms;

	/* === Z-INDEX === */
	--z-base:        1;
	--z-header:      50;
	--z-mobile-nav:  60;
	--z-modal:       100;
	--z-toast:       200;
}

/* === BREAKPOINT MIXINS (kao reference; CSS koristi @media direktno) === */
/*
   sm: 480px
   md: 768px
   lg: 1024px
   xl: 1280px
*/