/*
 * Global CSS Foundation
 * Uses tokens synchronized with theme.json
 */

 :root {
	/* Brand Colors */
	--cp-color-primary: var(--wp--preset--color--primary, #111827);
	--cp-color-primary-hover: #1e293b;
	--cp-color-secondary: var(--wp--preset--color--secondary, #7C3AED);
	--cp-color-accent: var(--wp--preset--color--accent, #2563EB);
	--cp-color-accent-hover: #1D4ED8;
	--cp-color-success: #16A34A;
	--cp-color-warning: #F59E0B;
	--cp-color-danger: #EF4444;

	/* Brand Gradient */
	--cp-gradient-start: #4F46E5;
	--cp-gradient-end: #7C3AED;
	--cp-gradient-angle: 135deg;
	--cp-gradient-brand: linear-gradient(var(--cp-gradient-angle), var(--cp-gradient-start), var(--cp-gradient-end));

	/* Foundations & Surfaces */
	--cp-color-background: var(--wp--preset--color--background, #F7F7FC);
	--cp-color-bg: var(--cp-color-background);
	--cp-color-surface: var(--wp--preset--color--surface, #FFFFFF);
	--cp-color-surface-muted: var(--wp--preset--color--surface-muted, #F4F1FF);
	--cp-color-surface-tint: #F4F1FF;
	--cp-color-surface-dark: #111827;
	--cp-color-heading: var(--wp--preset--color--heading, #111827);
	--cp-color-text: var(--wp--preset--color--text, #374151);
	--cp-color-text-muted: var(--wp--preset--color--text-muted, #6B7280);
	--cp-color-border: var(--wp--preset--color--border, #E5E7EB);
	--cp-color-border-strong: var(--wp--preset--color--border-strong, #CBD5E1);

	/* Spacing */
	--cp-space-1: var(--wp--preset--spacing--space-1, 4px);
	--cp-space-2: var(--wp--preset--spacing--space-2, 8px);
	--cp-space-3: var(--wp--preset--spacing--space-3, 12px);
	--cp-space-4: var(--wp--preset--spacing--space-4, 16px);
	--cp-space-5: var(--wp--preset--spacing--space-5, 20px);
	--cp-space-6: var(--wp--preset--spacing--space-6, 24px);
	--cp-space-8: var(--wp--preset--spacing--space-8, 32px);
	--cp-space-10: var(--wp--preset--spacing--space-10, 40px);
	--cp-space-12: var(--wp--preset--spacing--space-12, 48px);
	--cp-space-16: var(--wp--preset--spacing--space-16, 64px);

	/* Typography */
	--cp-font-heading: "Baloo 2", ui-sans-serif, system-ui, sans-serif;
	--cp-font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
	--cp-font-family: var(--cp-font-body);
	--cp-font-size-small: var(--wp--preset--font-size--small, 0.875rem);
	--cp-font-size-normal: var(--wp--preset--font-size--normal, 1rem);
	--cp-font-size-medium: var(--wp--preset--font-size--medium, 1.125rem);
	--cp-font-size-large: var(--wp--preset--font-size--large, 1.5rem);
	--cp-font-size-xlarge: var(--wp--preset--font-size--x-large, 2rem);
	--cp-font-size-huge: var(--wp--preset--font-size--huge, 2.5rem);
	
	/* Layout & Container */
	--cp-content-width: 780px;
	--cp-container-max: 1240px;
	--cp-shell-max: 1360px;
	--cp-header-max: 1360px;
	--cp-footer-max: 1360px;
	--cp-header-logo-max-width: 240px;
	--cp-footer-logo-max-width: 250px;
	--cp-footer-logo-max-height: 54px;
	--cp-wide-width: var(--cp-container-max, 1240px);
	--cp-container-padding: var(--cp-space-4);
	--cp-section-space: 88px;

	/* Shapes & Elevation */
	--cp-radius-small: 4px;
	--cp-radius-button: 8px;
	--cp-radius-medium: 8px;
	--cp-radius-card: 16px;
	--cp-radius-large: 16px;
	--cp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--cp-shadow-card: 0 4px 20px -2px rgba(17, 24, 39, 0.06), 0 2px 6px -1px rgba(17, 24, 39, 0.04);
	--cp-shadow-elevated: 0 20px 25px -5px rgba(17, 24, 39, 0.1), 0 10px 10px -5px rgba(17, 24, 39, 0.04);
	--cp-transition: 0.2s ease-in-out;
}

@media (min-width: 768px) {
	:root {
		--cp-container-padding: var(--cp-space-6);
	}
}

@media (min-width: 1024px) {
	:root {
		--cp-container-padding: var(--cp-space-8);
	}
}

/* Reset & Normalization */
*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--cp-font-body);
	font-size: var(--cp-font-size-normal);
	line-height: 1.6;
	color: var(--cp-color-text);
	background-color: var(--cp-color-background);
}

.cp-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cp-site-main {
	flex: 1 0 auto;
}

.cp-site-footer {
	margin-top: auto;
}

img, video {
	max-width: 100%;
	height: auto;
}

/* Links */
a {
	color: var(--cp-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--cp-transition);
}

a:hover, a:focus {
	color: var(--cp-color-accent-hover);
}

a:focus-visible {
	outline: 2px solid var(--cp-color-accent);
	outline-offset: 2px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--cp-font-heading);
	color: var(--cp-color-text);
	margin-top: 0;
	margin-bottom: var(--cp-space-4);
	font-weight: 700;
	line-height: 1.2;
}

h1 { font-size: var(--cp-font-size-huge); }
h2 { font-size: var(--cp-font-size-xlarge); }
h3 { font-size: var(--cp-font-size-large); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--cp-font-size-medium); font-weight: 600; line-height: 1.4; }

p {
	margin-top: 0;
	margin-bottom: var(--cp-space-4);
	font-family: var(--cp-font-body);
}

button,
input,
select,
textarea {
	font-family: var(--cp-font-body);
}

button,
.cp-button,
.wp-element-button,
.wp-block-button__link,
.cp-primary-nav a,
.cp-site-title {
	font-family: var(--cp-font-heading);
}

/* Elementor follows the site typography by default. Per-widget Elementor typography selectors
 * remain more specific, so deliberate instance overrides still work. */
body .elementor-widget-heading .elementor-heading-title,
body .elementor-button .elementor-button-text {
	font-family: var(--cp-font-heading);
}

body .elementor-widget-text-editor,
body .elementor-widget-text-editor p {
	font-family: var(--cp-font-body);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}