/**
 * Design Tokens -- Parenting Journal Nepal
 * Source of truth: approved Design System document v1.0, Sections 1-4.
 * Every color, type, spacing, radius, and shadow value used anywhere
 * on the front end or in the block editor should reference one of
 * these custom properties -- never a hardcoded value.
 */

:root {
	/* Primary -- Soft Purple (Design System 1.1) */
	--color-primary-50: #F3F1FD;
	--color-primary-100: #E6E1FB;
	--color-primary-200: #CCC3F7;
	--color-primary-300: #B0A2F0;
	--color-primary-400: #9683E9;
	--color-primary-500: #7B63DE;
	--color-primary-600: #644FC2;
	--color-primary-700: #4F3D9E;
	--color-primary-800: #3B2D78;
	--color-primary-900: #281E52;

	/* Secondary -- Teal (Design System 1.2) */
	--color-teal-50: #EFFCFA;
	--color-teal-100: #D6F7F1;
	--color-teal-200: #ADEEE3;
	--color-teal-300: #7BDFD0;
	--color-teal-400: #4CC9B8;
	--color-teal-500: #2BAFA0;
	--color-teal-600: #1F8D82;
	--color-teal-700: #196F67;
	--color-teal-800: #14544F;
	--color-teal-900: #0E3B38;

	/* Accent -- Warm Coral (Design System 1.3) */
	--color-coral-50: #FFF3EF;
	--color-coral-100: #FFE3D9;
	--color-coral-200: #FFC5AF;
	--color-coral-300: #FF9E7D;
	--color-coral-400: #FF7F56;
	--color-coral-500: #F76248;
	--color-coral-600: #E0492F;
	--color-coral-700: #B93A26;
	--color-coral-800: #8F2E1F;
	--color-coral-900: #632016;

	/* Neutrals -- Dark Gray (Design System 1.4) */
	--color-gray-50: #F8F9FA;
	--color-gray-100: #EEF0F2;
	--color-gray-200: #DDE1E5;
	--color-gray-300: #C3C9D0;
	--color-gray-400: #9AA2AC;
	--color-gray-500: #707880;
	--color-gray-600: #545C64;
	--color-gray-700: #3D444B;
	--color-gray-800: #262B30;
	--color-gray-900: #16191C;

	/* Background (Design System 1.5) */
	--color-bg: #FFFFFF;
	--color-bg-alt: #FAFAFB;

	/* Semantic (Design System 1.6) */
	--color-success: #1F9D55;
	--color-warning: #E8A33D;
	--color-error: #D9432E;
	--color-info: var(--color-teal-500);

	/* Typography (Design System 2) */
	--font-heading: 'Lora', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--text-h1-size: 1.75rem;
	--text-h1-line: 1.2;
	--text-h2-size: 1.5rem;
	--text-h2-line: 1.25;
	--text-h3-size: 1.25rem;
	--text-h3-line: 1.3;
	--text-h4-size: 1.125rem;
	--text-h4-line: 1.4;
	--text-body-lg-size: 1.125rem;
	--text-body-lg-line: 1.6;
	--text-body-size: 1rem;
	--text-body-line: 1.65;
	--text-body-sm-size: 0.875rem;
	--text-body-sm-line: 1.5;
	--text-xs-size: 0.75rem;
	--text-xs-line: 1.4;

	/* Spacing -- 8px grid (Design System 3) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* Border radius (Design System 4) */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-full: 999px;

	/* Elevation (Design System 4) */
	--shadow-sm: 0 1px 2px rgba(22, 25, 28, 0.06);
	--shadow-md: 0 4px 12px rgba(22, 25, 28, 0.08);
	--shadow-lg: 0 12px 32px rgba(22, 25, 28, 0.12);

	/* Layout */
	--container-max: 1200px;
	--article-max: 720px;

	/* Iconography (Design System Section 8) */
	--icon-sm: 16px;
	--icon-md: 20px;
	--icon-lg: 24px;
	--icon-xl: 32px;
}

/* Desktop type-scale step-up (Design System 2.2) */
@media (min-width: 1024px) {
	:root {
		--text-h1-size: 2.5rem;
		--text-h1-line: 1.15;
		--text-h2-size: 2rem;
		--text-h2-line: 1.2;
		--text-h3-size: 1.5rem;
		--text-h3-line: 1.3;
		--text-h4-size: 1.25rem;
		--text-body-lg-size: 1.1875rem;
		--text-body-size: 1.0625rem;
	}
}

/**
 * Breakpoint reference (documentation only -- CSS custom properties
 * cannot be used inside @media conditions, so these are hardcoded at
 * each call site per the Design System's breakpoint table):
 * sm: 480px   md: 768px   lg: 1024px   xl: 1280px
 */