/*
 * CarAssist247 design tokens. Single source of truth for color,
 * typography, spacing, radius, shadow and motion values used across
 * the whole site. Change a value here, not in individual pages/widgets.
 */

:root {
	/* Color */
	--ca-color-primary: #16294D;
	--ca-color-primary-hover: #203A63;
	--ca-color-secondary: #4B5563;
	--ca-color-accent: #C2570A;
	--ca-color-accent-hover: #A3480A;
	--ca-color-whatsapp: #167A48; /* was #1D9A5C - darkened for WCAG AA text contrast */
	--ca-color-whatsapp-hover: #0F5A35;
	--ca-color-background: #F7F8FA;
	--ca-color-surface: #FFFFFF;
	--ca-color-surface-alt: #EEF1F5;
	--ca-color-text: #101828;
	--ca-color-text-muted: #5B6472;
	--ca-color-text-on-dark: #FFFFFF;
	--ca-color-border: #E2E5EA;
	--ca-color-success: #1F9D55;
	--ca-color-warning: #CA8A04;
	--ca-color-error: #DC2626;
	--ca-color-focus: #2F6FED;

	/* Typography */
	--ca-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--ca-font-size-display: clamp(1.75rem, 1.4rem + 2.2vw, 2.75rem);
	--ca-line-height-display: 1.15;
	--ca-letter-spacing-display: -0.01em;
	--ca-font-weight-display: 700;

	--ca-font-size-h1: clamp(1.5rem, 1.3rem + 1.3vw, 2.25rem);
	--ca-line-height-h1: 1.2;
	--ca-letter-spacing-h1: -0.01em;
	--ca-font-weight-h1: 700;

	--ca-font-size-h2: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
	--ca-line-height-h2: 1.25;
	--ca-letter-spacing-h2: -0.005em;
	--ca-font-weight-h2: 700;

	--ca-font-size-h3: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
	--ca-line-height-h3: 1.3;
	--ca-font-weight-h3: 600;

	--ca-font-size-h4: 1.125rem;
	--ca-line-height-h4: 1.35;
	--ca-font-weight-h4: 600;

	--ca-font-size-body: 1rem;
	--ca-line-height-body: 1.6;
	--ca-font-weight-body: 400;

	--ca-font-size-small: 0.875rem;
	--ca-line-height-small: 1.5;

	--ca-font-size-button: 0.9375rem;
	--ca-font-weight-button: 600;

	--ca-font-size-label: 0.875rem;
	--ca-font-weight-label: 600;

	--ca-font-size-caption: 0.75rem;
	--ca-letter-spacing-caption: 0.01em;

	/* Spacing */
	--ca-space-xs: 0.5rem;
	--ca-space-sm: 1rem;
	--ca-space-md: 1.5rem;
	--ca-space-lg: 2.5rem;
	--ca-space-xl: 4rem;
	--ca-space-2xl: 6rem;
	--ca-space-3xl: 8rem;

	/* Layout */
	--ca-container-max: 1200px;
	--ca-container-content: 720px;
	--ca-gutter: 16px;

	/* Radius */
	--ca-radius-sm: 6px;
	--ca-radius-md: 10px;
	--ca-radius-lg: 16px;
	--ca-radius-pill: 999px;

	/* Shadow */
	--ca-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--ca-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
	--ca-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
	--ca-focus-ring: 0 0 0 3px rgba(47, 111, 237, 0.35);

	/* Motion - durations slowed slightly for a calmer, more premium feel
	   (was 150/220/320ms); same cubic-bezier easing kept as-is, since the
	   too-fast feeling was a duration issue, not an easing one. Every
	   transition/animation using these tokens (buttons, inputs, cards,
	   FAQ, hero entrance, scroll reveal) picks this up automatically -
	   no other rule needs to change.
	   fast: buttons, nav links, mobile action bar, form-field focus.
	   base: card hover, FAQ icon rotation + open/close.
	   slow: hero entrance, scroll reveal. */
	--ca-transition-fast: 220ms cubic-bezier(0.22, 1, 0.36, 1);
	--ca-transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
	--ca-transition-slow: 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
	:root {
		--ca-gutter: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--ca-gutter: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ca-transition-fast: 0ms;
		--ca-transition-base: 0ms;
		--ca-transition-slow: 0ms;
	}
}