/* ================================================================
   Brend — zajednički tokeni i komponente za javne strane (početna, „Moje
   knjige"): boje, fontovi, radijusi, senke, širina sadržaja, dugmad, kartica,
   logo. Izdvojeno iz mag-pocetna.css (v0.21); van :root nema hex vrednosti.
   Fontove (Baloo 2 + Nunito) učitava functions.php (Google Fonts).
   ================================================================ */

:root {
	/* boje */
	--c-bg:        #FFF8F0;  /* podloga strane */
	--c-bg-2:      #FFF1E4;  /* sekundarna podloga (utisci, futer) */
	--c-surface:   #FFFFFF;  /* kartice, bele sekcije */
	--c-line:      #F0E6DA;  /* ivice, delioci */
	--c-ink:       #241F33;  /* glavni tekst, tamna dugmad */
	--c-ink-2:     #4A4458;  /* sekundarni tekst (body, podnaslovi) */
	--c-muted:     #6B6478;  /* tercijarni tekst — najmanje 14px */
	--c-accent:    #D93D26;  /* primarni CTA, eyebrow, cene */
	--c-accent-h:  #C23420;  /* hover primarnog CTA */
	--c-accent-sh: #A82A17;  /* „3D" senka primarnog CTA */
	--c-sun:       #FFD24D;  /* sitni naglasci: broj koraka, zvezdice, avatar */
	--c-ok:        #2E8B57;  /* kvačice */
	--c-ok-line:   #BFE8D6;  /* ivica kartice kad je sve spremno (korak „Slike") */
	/* pastelne korice demoa */
	--c-peach:     #FDE7D3;
	--c-mint:      #DDEFE7;
	--c-butter:    #FFF1C2;
	--c-lilac:     #E6E2F5;
	--c-ice:       #DDE8F0;
	--c-rose:      #FCE1E1;
	/* boje iz reference kojih nema u SPEC-u */
	--c-line-2:    #E6DCCF;  /* ivica ghost dugmeta */
	--c-halo:      #FFEDD9;  /* krug iza knjige u heroju */
	--c-book-edge: #D8CEC0;  /* ivice listova mini-knjige */
	--c-dash:      #D9CFC1;  /* isprekidani okvir „Prevuci slike ovde" */
	--c-rikna:     rgba(0, 0, 0, 0.12);

	/* tipografija */
	--f-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
	--f-body:    'Nunito', system-ui, sans-serif;

	/* radijusi */
	--r-card: 24px;
	--r-pill: 999px;
	--r-img:  6px;

	/* senke */
	--sh-card:   0 10px 30px rgba(36, 31, 51, 0.06);
	--sh-card-h: 0 16px 40px rgba(36, 31, 51, 0.12);
	--sh-book:   0 30px 50px rgba(36, 31, 51, 0.28);
	--sh-photo:  0 10px 20px rgba(36, 31, 51, 0.20);
	--sh-mini:   0 14px 24px rgba(36, 31, 51, 0.18);
	--sh-vrh:    0 4px 20px rgba(36, 31, 51, 0.06);
	--sh-sticky: 0 -10px 24px rgba(36, 31, 51, 0.08);

	/* razmaci */
	--wrap-max: 1200px;
	--gutter: 40px;
	--knjiga: clamp(220px, 21vw, 270px);   /* jedna strana hero knjige; otvorena knjiga je dve */
}

/* ---------------------------------------------------------------- širina sadržaja */

.mag-wrap {
	max-width: var(--wrap-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- komponente */

/* dugme: „game" osećaj — primarno fizički ulegne na klik */
.mag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--r-pill);
	box-sizing: border-box;
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s, background-color 0.12s, color 0.12s, border-color 0.12s;
}

.mag-btn-primary {
	background: var(--c-accent);
	color: var(--c-surface);
	box-shadow: 0 6px 0 var(--c-accent-sh);
}

.mag-btn-primary:hover {
	background: var(--c-accent-h);
	transform: translateY(2px);
	box-shadow: 0 4px 0 var(--c-accent-sh);
}

.mag-btn-primary:active {
	transform: translateY(4px);
	box-shadow: 0 2px 0 var(--c-accent-sh);
}

.mag-btn-secondary {
	background: var(--c-surface);
	color: var(--c-ink);
	border: 2px solid var(--c-ink);
}

.mag-btn-secondary:hover {
	background: var(--c-ink);
	color: var(--c-surface);
}

.mag-btn-ghost {
	height: 44px;
	padding: 0 20px;
	background: transparent;
	color: var(--c-ink);
	border: 2px solid var(--c-line-2);
	font-size: 16px;
}

.mag-btn-ghost:hover { border-color: var(--c-ink); }

.mag-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
	box-sizing: border-box;
}

a.mag-card {
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s, box-shadow 0.18s;
}

a.mag-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-card-h);
}

/* manje primarno dugme (kartica knjige): ista fizika, niže */
.mag-btn-mala {
	height: 44px;
	padding: 0 20px;
	font-size: 16px;
}

.mag-btn-mala.mag-btn-primary { box-shadow: 0 4px 0 var(--c-accent-sh); }
.mag-btn-mala.mag-btn-primary:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--c-accent-sh); }
.mag-btn-mala.mag-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-accent-sh); }

/* dugme kao tekst (sitne akcije: preimenuj, obriši) */
.mag-link-dugme {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 6px;
	border: 0;
	background: none;
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 14px;
	color: var(--c-ink-2);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--c-line-2);
	transition: color 0.12s, text-decoration-color 0.12s;
}

.mag-link-dugme:hover { color: var(--c-ink); text-decoration-color: currentColor; }
.mag-link-dugme-opasno { color: var(--c-accent); }
.mag-link-dugme-opasno:hover { color: var(--c-accent-h); }

/* ---------------------------------------------------------------- logo */

.mag-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--c-ink);
	text-decoration: none;
}

.mag-logo__znak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--c-accent);
	color: var(--c-surface);
}

/* ---------------------------------------------------------------- mala maskota (knjiga sa očima) */

/* privremeni lik iz mag_pocetna_maskota_svg(): avatar uz oblačić na početnoj i u koraku „Slike" */
.mag-maskota-mala {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-sun);
}

.mag-maskota-mala__telo { fill: var(--c-surface); stroke: var(--c-ink); }
.mag-maskota-mala__crta { fill: none; stroke: var(--c-ink); }
.mag-maskota-mala__oko  { fill: var(--c-ink); }