/* ==========================================================================
   CSS Variables - Light/Dark Theme
   ========================================================================== */

:root,
[data-theme="light"] {
	--bg: #ffffff;
	--bg-soft: #e7eff4;
	--bg-card: #ffffff;
	--bg-dark: #1a1a18;
	--border: #e2e4e6;
	--border-strong: #cfd3d7;
	--text: #1a1a18;
	--text-soft: #4a4a48;
	--text-muted: #737370;
	--accent: #2d9de2;
	--accent-dark: #1f8bc8;
	--accent-soft: #e8f5fc;
	--link: #2d9de2;
	--link-hover: #1f8bc8;
	--navy: #1a1a18;
	--navy-dark: #121210;
	--header-bg: #ffffff;
	--header-stripe: #f4f5f6;
	--header-fg: #4a4a48;
	--header-fg-hover: #2d9de2;
	--header-border: #ffffff;
	--hero-overlay: rgba(26, 26, 24, 0.55);
	--radius-card: 0.25rem;
	--radius-md: 0.25rem;
	--container: 1180px;
	/* --font-heading / --font-body: zie hex-fonts (eerste stylesheet). */
	--line-height-body: 1.75;
	--top-stripe-height: 42px;
	--header-height: 96px;
	--mobile-nav-backdrop: rgba(26, 26, 24, 0.35);
	--mobile-nav-panel-bg: #ffffff;
	--mobile-nav-panel-fg: #1a1a18;
	--mobile-nav-link: #4a4a48;
	--mobile-nav-link-hover: #1a1a18;
	--mobile-nav-link-active: #2d9de2;
}

[data-theme="dark"] {
	--bg: #121210;
	--bg-soft: #1a1a18;
	--bg-card: #222220;
	--bg-dark: #1a1a18;
	--border: #333330;
	--border-strong: #454542;
	--text: #f3f5f8;
	--text-soft: #c8ccd0;
	--text-muted: #8f9396;
	--accent: #2d9de2;
	--accent-dark: #5cb3e8;
	--accent-soft: rgba(45, 157, 226, 0.16);
	--link: #5cb3e8;
	--link-hover: #2d9de2;
	--navy: #1a1a18;
	--navy-dark: #0e0e0c;
	--header-bg: #1a1a18;
	--header-stripe: #141412;
	--header-fg: rgba(255, 255, 255, 0.72);
	--header-fg-hover: #2d9de2;
	--header-border: #1a1a18;
	--hero-overlay: rgba(14, 14, 12, 0.68);
	--mobile-nav-backdrop: rgba(0, 0, 0, 0.45);
	--mobile-nav-panel-bg: #222220;
	--mobile-nav-panel-fg: #f3f5f8;
	--mobile-nav-link: rgba(243, 245, 248, 0.92);
	--mobile-nav-link-hover: #ffffff;
	--mobile-nav-link-active: #5cb3e8;
}