/* ======== Global CSS variables ======== */
:root {
	--container-width: 1200px;
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 96px;
	--space-8: 128px;
	--color-primary: #1f7a4d;
	--color-primary-hover: #17633f;
	--color-accent: #4ade80;
	--color-success: #15803d;
	--color-danger: #dc2626;
	--color-title: #1e293b;
	--color-text: #1e293b;
	--color-text-secondary: #4b5563;
	--color-text-light: #64748b;
	--color-text-small-on-dark: lightblue;
	--color-border: #e2e8f0;
	--color-background: #ffffff;
	--color-background-alt: #e6e6e6;
	--color-surface: #ffffff;
	--color-surface-strong: #ffffff;
	--color-cta-bg: #2f3555;
	--color-featured: #da6c1d;
	--color-featured-hover: #c0611d;
	--color-ribbon-green: #16a34a;
	--color-ribbon-blue: #2563eb;
	--color-ribbon-blue-hover: #1d4ed8;
	--color-highlight-loss: #ff4d4f;
	--color-highlight-save: #16a34a;
	--color-dark-panel: #1e2538;
	--color-btn-light: #ffffff;
	--color-btn-light-hover: #e6e6e6;
	--color-divider-accent: #2f88414a;
	--color-divider-soft: rgba(15, 23, 42, 0.04);
	--shadow-level-1: 0 2px 6px rgba(0, 0, 0, 0.06);
	--shadow-level-2: 0 8px 24px rgba(0, 0, 0, 0.10);
	--shadow-level-3: 0 20px 40px rgba(0, 0, 0, 0.15);
	--shadow-level-mobile: 0 6px 16px rgba(223, 226, 240, 0.9);
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 999px;

	/*  ======== Global CSS variables for pages (not homepage) ========  */

	/* PRICING PAGE */
	--pricing-title-color: #2f6b45;
	--pricing-subtitle-color: #1f2d24;
	--pricing-price-color: #1b5e20;
	--pricing-highlight-text: #1b5e20;
	--pricing-highlight-bg: #c8e6c9;
	--pricing-section-bg: #ffffff;
	--pricing-featured-bg: #e6f2ea;
	--pricing-featured-border: #2f6b45;
	--pricing-header-bg: #e9e8e8;
	--pricing-content-bg: #eeeeee;
	--pricing-featured-content-bg: #e6f2ea;
	--pricing-bullet-box-bg: #ffffff;
	--pricing-featured-tag-bg: #2f6b45;
	--pricing-featured-tag-color: #ffffff;

	/* VIDEO-PRESENTATION & SAVINGS-GUIDE PAGES */
	--page-text-red: #d32f2f;
	--page-text-green: #2e7d32;
	--page-highlight-text: #1b5e20;
	--page-highlight-bg: #c8e6c9;
	--page-tbl-desc-color: #c2c1c1;
	--page-heading-primary: #2f6b45;
	--page-heading-secondary: #1f2d24;
	--page-link-color: #2f6b45;
	--page-bullet-box-bg: #ffffff;
	--page-table-bg: #ffffff;
	--page-table-header-bg: #e6f2ea;
	--page-table-header-color: #2f6b45;
	--page-table-border: #e6e6e6;
	--page-video-placeholder-bg: #2a2a2a;
	--page-video-placeholder-color: #888;
	--page-video-placeholder-border: #444;
	--page-mobile-grid-bg: #e8e6e6;
	--page-mobile-h3-bg: #7ae3ff;

}

html.dark {
	--color-title: #ffffff;
	--color-text: #f1f5f9;
	--color-text-secondary: #9aa5b8;
	--color-text-light: #cbd5e1;
	--color-border: #3a4150;
	--color-background: #2a2f3a;
	--color-background-alt: #323847;
	--color-surface: #2f3543;
	--color-surface-strong: #3c4458;
	--color-btn-light: #3c4458;
	--color-btn-light-hover: #343b4d;
	--color-divider-accent: rgba(47, 136, 65, 0.4);
	--color-divider-soft: rgba(226, 232, 240, 0.12);
	--shadow-level-mobile: 0 6px 16px rgba(0, 0, 0, 0.35);

	/*  ======== Global CSS variables for pages (not homepage) ========  */

	/* PRICING PAGE */
	--pricing-title-color: #f1f5f9;
	--pricing-subtitle-color: #f1f5f9;
	--pricing-price-color: #a7f3d0;
	--pricing-highlight-text: #a7f3d0;
	--pricing-highlight-bg: #1b4332;
	--pricing-section-bg: #2f3543;
	--pricing-featured-bg: #1b4332;
	--pricing-featured-border: #52b788;
	--pricing-header-bg: #3a4150;
	--pricing-content-bg: #323847;
	--pricing-featured-content-bg: #1b4332;
	--pricing-bullet-box-bg: #3c4458;
	--pricing-featured-tag-bg: #52b788;
	--pricing-featured-tag-color: #ffffff;

	/* VIDEO-PRESENTATION & SAVINGS-GUIDE PAGES */
	--page-text-red: #ff6b6b;
	--page-text-green: #51cf66;
	--page-highlight-text: #a7f3d0;
	--page-highlight-bg: #1b4332;
	--page-tbl-desc-color: #9aa5b8;
	--page-heading-primary: #a7f3d0;
	--page-heading-secondary: #f1f5f9;
	--page-bullet-box-bg: #3c4458;
	--page-table-bg: #2f3543;
	--page-table-header-bg: #1b4332;
	--page-table-header-color: #a7f3d0;
	--page-table-border: #3a4150;
	--page-video-placeholder-bg: #1a1a1a;
	--page-video-placeholder-color: #666;
	--page-video-placeholder-border: #333;
	--page-mobile-grid-bg: #3a4150;
	--page-link-color: #4ade80;
	--page-mobile-h3-bg: #0a6847;

}

html.dark body {
	background: var(--color-background);
	color: var(--color-text);
}

/* ======== DARK MODE TRANSITION ======== */
/* Transition aktivira se samo na button klik, ne na page load */
html.dark-mode-transition {
	transition: background-color 1.5s ease, color 1.5s ease;
}

html.dark-mode-transition body {
	transition: background-color 1.5s ease, color 1.5s ease;
}

html.dark-mode-transition * {
	transition: background-color 1.5s ease, color 1.5s ease, border-color 1.5s ease;
}



/* ======== NORMALIZE ======== */
html {
	box-sizing: border-box;
	font-size: 16px;
}

*, *::before, *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
	/* background: linear-gradient(to bottom, #fdfaf6, #e6f2ea); */
	color: #1f2d24;
	padding-top: 70px;
}

/* Mobile adjustment for fixed header */
@media (max-width: 768px) {
	body {
		padding-top: 56px;
	}
}



/* ======== Global CSS ======== */

/* BASE SETTINGS */
.page-legal .container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 20px 40px;
}
/* Pages that are not legal-pages or homepage */
.page .container {
	width: 100%;
	margin: 0 auto;
	max-width: 1280px;
	padding: 40px 24px 100px;
}

/* MOBILE */
@media (max-width: 768px) {

	/* Pages that are not legal-pages or homepage */
	.page .container {
		padding: 0 16px 40px; /* Manji padding sa strana */
	}
}

/* ===================================================== */
/* Dark/Light mode toggle button */
/* ===================================================== */
.theme-toggle {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: var(--color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	transition: transform 0.2s ease;
}
.theme-toggle:hover {
	transform: scale(1.1);
}

/* ======== DARK MODE FLASH OVERLAY ======== */
#theme-flash-overlay {
	position: fixed;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1a2a4a;
	opacity: 1;
	z-index: 999;
	pointer-events: none;
	animation: fadeOutOverlay 0.6s ease 0.2s forwards;
}

@keyframes fadeOutOverlay {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* Mobile adjustment for mobile toolbar */
@media (max-width: 480px) {
	#theme-flash-overlay {
		top: 56px;
		bottom: 40px;
	}
}