/**
 * PPGKit - Shared CSS Design Tokens
 *
 * Maps to WordPress theme.json variables when available.
 * Works standalone and alongside ContentKit.
 */
:root {
	/* Primary Colors */
	--ppg-color-primary: var(--wp--preset--color--primary, #8faad9);
	--ppg-color-primary-hover: color-mix(in srgb, var(--ppg-color-primary) 85%, black);
	--ppg-color-primary-light: color-mix(in srgb, var(--ppg-color-primary) 10%, white);

	/* Secondary Color */
	--ppg-color-secondary: var(--wp--preset--color--secondary, #1f2431);

	/* Text Colors */
	--ppg-color-dark: var(--wp--preset--color--text, #1A1A1A);
	--ppg-color-text: var(--wp--preset--color--text, #1F2937);
	--ppg-color-text-muted: #6B7280;

	/* Background Colors */
	--ppg-color-background: var(--wp--preset--color--background, #FFFFFF);
	--ppg-color-background-alt: var(--wp--preset--color--light-gray, #F8F9FA);
	--ppg-color-surface: #FFFFFF;

	/* Border Colors */
	--ppg-color-border: var(--wp--preset--color--border, #E5E7EB);

	/* Typography - maps to theme font families */
	--ppg-font-heading: var(--wp--preset--font-family--heading, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
	--ppg-font-body: var(--wp--preset--font-family--system, 'Inter', system-ui, -apple-system, sans-serif);

	/* Spacing */
	--ppg-spacing-section: var(--wp--preset--spacing--xxl, 5rem);
	--ppg-spacing-section-mobile: var(--wp--preset--spacing--large, 3rem);

	/* Border Radius */
	--ppg-radius-sm: 0.375rem;
	--ppg-radius-md: 0.5rem;
	--ppg-radius-lg: 0.75rem;
	--ppg-radius-xl: 1rem;

	/* Shadows */
	--ppg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--ppg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--ppg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Transitions */
	--ppg-transition-fast: 150ms ease;
	--ppg-transition-normal: 300ms ease;
}

/* Import Google Fonts (only when not provided by theme) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* Shared Container */
.ppg-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}