/**
 * City portal / SaaS design system — Kadence child theme
 * Spacing: 8px grid; content max aligned with header/footer (--cv-content-max); tokens as CSS variables
 *
 * Layout: mobile-first — base styles assume a narrow viewport; gutters and spacing scale up
 * at breakpoints. Main content width is `100%` inside `.cv-container` / `.site-container`
 * (max `--cv-content-max` + horizontal `--cv-gutter`). Avoid fixed `rem` max-widths on article
 * shells so copy aligns with the header and footer.
 */

:root {
	/* Primary */
	--cv-primary-50: #eff6ff;
	--cv-primary-100: #dbeafe;
	--cv-primary-200: #bfdbfe;
	--cv-primary-300: #93c5fd;
	--cv-primary-400: #60a5fa;
	--cv-primary-500: #3b82f6;
	--cv-primary-600: #2563eb;
	--cv-primary-700: #1d4ed8;

	/* Secondary & accent */
	--cv-secondary: #10b981;
	--cv-secondary-hover: #059669;
	--cv-amber: #f59e0b;
	--cv-amber-hover: #d97706;

	/* Neutrals — muted darkened for body copy on light sections */
	--cv-dark-text: #0c1222;
	--cv-muted: #334155;
	--cv-surface-50: #fafbff;
	--cv-surface-100: #f1f5f9;
	--cv-surface-200: #e2e8f0;
	--cv-surface-300: #cbd5e1;

	/* Semantic */
	--cv-storm: #ef4444;
	--cv-rain: #3b82f6;

	/* Page */
	--cv-page-bg: #f8fafc;

	/* Radius */
	--cv-radius-card: 16px;
	--cv-radius-sm: 12px;
	--cv-radius-lg: 20px;
	--cv-radius-btn: 10px;
	--cv-radius-pill: 9999px;

	/* Chrome */
	--cv-card-border: rgb(226 232 240 / 0.85);
	--cv-header-border: rgb(226 232 240 / 0.85);

	/* Shadows — calm depth, product-grade */
	--shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 18px rgb(15 23 42 / 0.045);
	--shadow-card-hover: 0 3px 10px rgb(15 23 42 / 0.06), 0 10px 32px rgb(15 23 42 / 0.045);
	--shadow-card-lg: 0 6px 24px rgb(15 23 42 / 0.06), 0 20px 50px rgb(15 23 42 / 0.04);
	--shadow-utility: 0 1px 2px rgb(15 23 42 / 0.035), 0 3px 14px rgb(15 23 42 / 0.038);
	--shadow-utility-hover: 0 2px 8px rgb(15 23 42 / 0.055), 0 8px 26px rgb(15 23 42 / 0.04);
	--shadow-editorial: 0 2px 6px rgb(15 23 42 / 0.055), 0 10px 36px rgb(15 23 42 / 0.075);
	--shadow-editorial-hover: 0 6px 20px rgb(15 23 42 / 0.08), 0 18px 52px rgb(15 23 42 / 0.065);
	--shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);

	/* Card chrome — shared light surfaces */
	--cv-card-inset: inset 0 1px 0 rgb(255 255 255 / 0.72);
	--cv-icon-box: 44px;
	--cv-radius-icon-box: 12px;

	/* Motion */
	--cv-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--cv-dur: 200ms;
	--cv-dur-slow: 300ms;

	/* Layout */
	--cv-content-max: 1280px;
	--cv-gutter: 20px;
	--cv-gutter-md: 32px;

	/* Typography stacks */
	--cv-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--cv-font-display: "Plus Jakarta Sans", var(--cv-font-body);
}

@media (min-width: 768px) {
	:root {
		--cv-gutter: var(--cv-gutter-md);
	}
}