/* ==========================================================================
   CSS Variables - Schildersbedrijf J. Bastiaansen
   Kleurenpalet gebaseerd op logo: terracotta/roodbruin accent, antraciet tekst
   Gebaseerd op het minimalistische ontwerp in index.html
   ========================================================================== */

:root,
[data-theme="light"] {
	/* Primaire kleuren */
	--bg: #ffffff;
	--bg-soft: #faf8f6;
	--bg-card: #ffffff;
	--bg-dark: #1f2328;
	
	/* Borders */
	--border: #e5e5e5;
	--border-strong: #d1d1d1;
	
	/* Tekst kleuren */
	--text: #1f2328;
	--text-soft: #57606a;
	--text-muted: #737373;
	
	/* Accent kleuren (terracotta) */
	--accent: #b8542c;
	--accent-dark: #9a4624;
	--accent-soft: #fdf5f2;
	--accent-light: #d4714a;
	
	/* Links */
	--link: #b8542c;
	--link-hover: #9a4624;
	
	/* Dark backgrounds */
	--navy: #1f2328;
	--navy-dark: #14171a;
	
	/* Header */
	--header-bg: #ffffff;
	--header-stripe: #faf8f6;
	--header-fg: #57606a;
	--header-fg-hover: #b8542c;
	--header-border: #ffffff;
	--header-height: 80px;
	
	/* Hero */
	--hero-overlay: rgba(31, 35, 40, 0.55);
	
	/* Layout */
	--container: 1200px;
	--radius-card: 8px;
	--radius-md: 6px;
	--line-height-body: 1.6;
	
	/* Typography */
	--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	
	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
	--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
	--shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
	
	/* Mobile nav */
	--mobile-nav-backdrop: rgba(31, 35, 40, 0.35);
	--mobile-nav-panel-bg: #ffffff;
	--mobile-nav-panel-fg: #1f2328;
	--mobile-nav-link: #57606a;
	--mobile-nav-link-hover: #1f2328;
	--mobile-nav-link-active: #b8542c;
	
	/* Legacy (backward compatibility) */
	--top-stripe-height: 0px;
}

[data-theme="dark"] {
	--bg: #14171a;
	--bg-soft: #1f2328;
	--bg-card: #24292e;
	--bg-dark: #1f2328;
	--border: #30363d;
	--border-strong: #484f58;
	--text: #f0f6fc;
	--text-soft: #c9d1d9;
	--text-muted: #8b949e;
	--accent: #d4714a;
	--accent-dark: #e8896a;
	--accent-soft: rgba(184, 84, 44, 0.16);
	--accent-light: #e8896a;
	--link: #d4714a;
	--link-hover: #e8896a;
	--navy: #1f2328;
	--navy-dark: #0d1117;
	--header-bg: #1f2328;
	--header-stripe: #14171a;
	--header-fg: rgba(255, 255, 255, 0.72);
	--header-fg-hover: #d4714a;
	--header-border: #1f2328;
	--hero-overlay: rgba(13, 17, 23, 0.68);
	--mobile-nav-backdrop: rgba(0, 0, 0, 0.45);
	--mobile-nav-panel-bg: #24292e;
	--mobile-nav-panel-fg: #f0f6fc;
	--mobile-nav-link: rgba(240, 246, 252, 0.92);
	--mobile-nav-link-hover: #ffffff;
	--mobile-nav-link-active: #d4714a;
}