/*
 * Design tokens za aiedukacije.hr
 * Zadržava nativni varijable iz mockova + bridge na WP theme.json preset-e.
 */

:root {
	/* Colors */
	--bg:            #FAFAFB;
	--bg-card:       #FFFFFF;
	--bg-soft:       #F2F3F5;
	--bg-deep:       #E5E7EB;
	--bg-dark:       #15171C;
	--bg-darker:     #0E0F13;
	--bg-navy:       #1A2436;

	--ink:           #15171C;
	--ink-2:         #4B5563;
	--ink-3:         #8A92A0;
	--ink-4:         #B6BBC4;
	--ink-light:     #FAFAFB;
	--ink-light-2:   rgba(250, 250, 251, 0.74);
	--ink-light-3:   rgba(250, 250, 251, 0.46);

	--accent:        #BD1E23;
	--accent-2:      #9A171B;
	--accent-soft:   #FBEEEE;
	--accent-line:   #FCA5A5;
	--accent-bright: #DC2626;

	--border:        #E5E7EB;
	--border-2:      #D1D5DB;

	--green:         #15803D;
	--green-soft:    #DCFCE7;
	--warn:          #B45309;
	--warn-soft:     #FEF3C7;

	/* Type families */
	--display: 'Bricolage Grotesque', system-ui, sans-serif;
	--body:    'DM Sans', system-ui, sans-serif;
	--mono:    'IBM Plex Mono', ui-monospace, monospace;

	/* Section spacing */
	--section-py:        80px;
	--section-py-lg:     104px;

	/* Container widths */
	--container-max:     1280px;
	--container-narrow:  960px;
	--container-reading: 720px;

	/* Shadows */
	--shadow-sm: 0 6px 16px -8px rgba(21, 23, 28, 0.12);
	--shadow-md: 0 18px 36px -14px rgba(21, 23, 28, 0.22);
	--shadow-lg: 0 24px 48px -20px rgba(21, 23, 28, 0.18);
	--shadow-xl: 0 30px 60px -24px rgba(21, 23, 28, 0.20);

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-xl: 24px;
}

/* Global reset (light) */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--body);
	background: var(--bg);
	color: var(--ink);
	line-height: 1.55;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Headings — body defaults; specific sections override */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1.2;
	font-weight: 700;
	margin: 0;
}

/* Selection */
::selection { background: var(--accent); color: white; }