/**

 * Design Tokens - CSS Custom Properties

 * Generated from design-direction.json

 *

 * @package Free_Psychicnet

 */



:root {

	/* Colors - Primary */

	--color-primary: #7C6BA7;

	--color-primary-hover: #6B5A96;

	--color-primary-light: rgba(124, 107, 167, 0.1);



	/* Colors - Secondary */

	--color-secondary: #FAF8F5;



	/* Colors - Accent */

	--color-accent: #7EB09B;

	--color-accent-hover: #6D9F8A;

	--color-accent-warm: #E8B89D;



	/* Colors - Neutral */

	--color-text-primary: #2D2A32;

	--color-text-secondary: #6B6670;

	--color-text-light: #9A959F;

	--color-border: #E8E6EA;

	--color-white: #FFFFFF;



	/* Colors - Semantic */

	--color-success: #5CB085;

	--color-error: #D9534F;

	--color-warning: #E9A84A;

	--color-info: #5B9BD5;



	/* Gradients */

	--gradient-hero: linear-gradient(135deg, #FAF8F5 0%, #F3EEF8 50%, #EDF5F2 100%);

	--gradient-card-hover: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%);



	/* Typography - Families */

	--font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--font-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;



	/* Typography - Scale */

	--text-h1: 3.5rem;

	--text-h2: 2.5rem;

	--text-h3: 1.75rem;

	--text-h4: 1.375rem;

	--text-h5: 1.125rem;

	--text-body-lg: 1.125rem;

	--text-body: 1rem;

	--text-body-sm: 0.875rem;

	--text-caption: 0.75rem;



	/* Typography - Line Heights */

	--leading-h1: 1.1;

	--leading-h2: 1.2;

	--leading-h3: 1.3;

	--leading-h4: 1.4;

	--leading-body: 1.6;

	--leading-body-lg: 1.7;



	/* Typography - Letter Spacing */

	--tracking-heading: -0.02em;

	--tracking-body: 0;



	/* Spacing (4px base unit) */

	--space-1: 0.25rem;

	--space-2: 0.5rem;

	--space-3: 0.75rem;

	--space-4: 1rem;

	--space-5: 1.25rem;

	--space-6: 1.5rem;

	--space-8: 2rem;

	--space-10: 2.5rem;

	--space-12: 3rem;

	--space-16: 4rem;

	--space-20: 5rem;

	--space-24: 6rem;



	/* Border Radius */

	--radius-sm: 4px;

	--radius-md: 8px;

	--radius-lg: 12px;

	--radius-xl: 16px;

	--radius-2xl: 24px;

	--radius-full: 9999px;



	/* Shadows */

	--shadow-xs: 0 1px 2px rgba(45, 42, 50, 0.05);

	--shadow-sm: 0 2px 4px rgba(45, 42, 50, 0.06), 0 1px 2px rgba(45, 42, 50, 0.04);

	--shadow-md: 0 4px 12px rgba(45, 42, 50, 0.08), 0 2px 4px rgba(45, 42, 50, 0.04);

	--shadow-lg: 0 8px 24px rgba(45, 42, 50, 0.10), 0 4px 8px rgba(45, 42, 50, 0.05);

	--shadow-xl: 0 16px 48px rgba(45, 42, 50, 0.12), 0 8px 16px rgba(45, 42, 50, 0.06);

	--shadow-inner: inset 0 2px 4px rgba(45, 42, 50, 0.06);

	--shadow-focus: 0 0 0 3px rgba(124, 107, 167, 0.3);



	/* Transitions */

	--transition-fast: 150ms ease-out;

	--transition-normal: 250ms ease-out;

	--transition-slow: 350ms ease-out;



	/* Layout */

	--container-max: 1200px;

	--container-narrow: 680px;

	--container-medium: 900px;

	--header-height: 72px;



	/* Section Padding */

	--section-padding: var(--space-24);

}



/* Mobile scale adjustments */

@media (max-width: 767px) {

	:root {

		--text-h1: 2.25rem;

		--text-h2: 1.75rem;

		--text-h3: 1.375rem;

		--text-h4: 1.125rem;

		--text-h5: 1rem;

		--section-padding: var(--space-12);

	}

}



@media (min-width: 768px) and (max-width: 1023px) {

	:root {

		--text-h1: 2.75rem;

		--text-h2: 2rem;

		--text-h3: 1.5rem;

		--section-padding: var(--space-16);

	}

}