/*
 * Perceptions Studio Custom Styles
 * A comprehensive utility framework for GeneratePress
 */

/* ============================================================
 * CSS CUSTOM PROPERTIES (VARIABLES)
 * ============================================================ */

:root {
	/* PS Color System - Semantic color variables */
	--ps-color-primary: #215bc2;
	--ps-color-primary-dark: #1a4a9b;
	--ps-color-primary-light: #d7e2f0;

	--ps-color-secondary: #d13b3b;
	--ps-color-secondary-dark: #a61212;
	--ps-color-secondary-light: #f6d3d3;

	--ps-color-accent: #ebc53b;
	--ps-color-accent-dark: #b4931d;
	--ps-color-accent-light: #f4efcb;

	--ps-white: #ffffff;
	--ps-black: #000000;

	--ps-color-success: #28a745;
	--ps-color-info: #17a2b8;
	--ps-color-warning: #ffc107;
	--ps-color-danger: #dc3545;

	/* Spacing Scale */
	--ps-space-xs: 0.25rem;   /* 4px */
	--ps-space-sm: 0.5rem;    /* 8px */
	--ps-space-md: 1rem;      /* 16px */
	--ps-space-lg: 1.5rem;    /* 24px */
	--ps-space-xl: 2rem;      /* 32px */
	--ps-space-2xl: 3rem;     /* 48px */
	--ps-space-3xl: 4rem;     /* 64px */
	--ps-space-4xl: 5rem;     /* 80px */
	--ps-space-5xl: 6.25rem;  /* 100px */
	--ps-space-6xl: 7.5rem;   /* 120px */

	/* Section-specific spacing */
	--ps-section-h: 1.25rem;  /* 20px - horizontal padding */
	--ps-section-sm: 2.5rem;  /* 40px */

	/* Border Radius Scale */
	--ps-radius-sm: 0.125rem; /* 2px */
	--ps-radius-md: 0.25rem;  /* 4px */
	--ps-radius-lg: 0.5rem;   /* 8px */
	--ps-radius-xl: 1rem;     /* 16px */
	--ps-radius-2xl: 1.5rem;  /* 24px */
	--ps-radius-full: 9999px;

	/* Typography Scale */
	--ps-text-xs: 0.75rem;    /* 12px */
	--ps-text-sm: 0.875rem;   /* 14px */
	--ps-text-base: 1rem;     /* 16px */
	--ps-text-lg: 1.125rem;   /* 18px */
	--ps-text-xl: 1.25rem;    /* 20px */
	--ps-text-2xl: 1.5rem;    /* 24px */
	--ps-text-3xl: 1.875rem;  /* 30px */
	--ps-text-4xl: 2.25rem;   /* 36px */
	--ps-text-5xl: 3rem;      /* 48px */

	/* Line Heights */
	--ps-leading-none: 1;
	--ps-leading-tight: 1.25;
	--ps-leading-snug: 1.375;
	--ps-leading-normal: 1.5;
	--ps-leading-relaxed: 1.625;
	--ps-leading-loose: 2;

	/* Font Weights */
	--ps-font-light: 300;
	--ps-font-normal: 400;
	--ps-font-medium: 500;
	--ps-font-semibold: 600;
	--ps-font-bold: 700;
	--ps-font-extrabold: 800;

	/* Shadows */
	--ps-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--ps-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--ps-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--ps-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--ps-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--ps-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Transitions */
	--ps-transition-fast: 150ms ease-in-out;
	--ps-transition-base: 250ms ease-in-out;
	--ps-transition-slow: 350ms ease-in-out;

	/* Text Width (in ch units for optimal readability) */
	--ps-prose-sm: 45ch;
	--ps-prose-base: 65ch;
	--ps-prose-lg: 75ch;
}

/* ============================================================
 * BACKGROUND COLOR UTILITIES
 * ============================================================ */

.ps-bg-primary { background-color: var(--ps-color-primary) !important; }
.ps-bg-primary-dark { background-color: var(--ps-color-primary-dark) !important; }
.ps-bg-primary-light { background-color: var(--ps-color-primary-light) !important; }

.ps-bg-secondary { background-color: var(--ps-color-secondary) !important; }
.ps-bg-secondary-dark { background-color: var(--ps-color-secondary-dark) !important; }
.ps-bg-secondary-light { background-color: var(--ps-color-secondary-light) !important; }

.ps-bg-accent { background-color: var(--ps-color-accent) !important; }
.ps-bg-accent-dark { background-color: var(--ps-color-accent-dark) !important; }
.ps-bg-accent-light { background-color: var(--ps-color-accent-light) !important; }

.ps-bg-white { background-color: var(--ps-white) !important; }
.ps-bg-black { background-color: var(--ps-black) !important; }

.ps-bg-success { background-color: var(--ps-color-success) !important; }
.ps-bg-info { background-color: var(--ps-color-info) !important; }
.ps-bg-warning { background-color: var(--ps-color-warning) !important; }
.ps-bg-danger { background-color: var(--ps-color-danger) !important; }

.ps-bg-transparent { background-color: transparent !important; }

/* ============================================================
 * TEXT COLOR UTILITIES
 * ============================================================ */

.ps-text-primary { color: var(--ps-color-primary) !important; }
.ps-text-primary-dark { color: var(--ps-color-primary-dark) !important; }
.ps-text-primary-light { color: var(--ps-color-primary-light) !important; }

.ps-text-secondary { color: var(--ps-color-secondary) !important; }
.ps-text-secondary-dark { color: var(--ps-color-secondary-dark) !important; }
.ps-text-secondary-light { color: var(--ps-color-secondary-light) !important; }

.ps-text-accent { color: var(--ps-color-accent) !important; }
.ps-text-accent-dark { color: var(--ps-color-accent-dark) !important; }
.ps-text-accent-light { color: var(--ps-color-accent-light) !important; }

.ps-text-white { color: var(--ps-white) !important; }
.ps-text-black { color: var(--ps-black) !important; }

.ps-text-success { color: var(--ps-color-success) !important; }
.ps-text-info { color: var(--ps-color-info) !important; }
.ps-text-warning { color: var(--ps-color-warning) !important; }
.ps-text-danger { color: var(--ps-color-danger) !important; }

/* ============================================================
 * TYPOGRAPHY UTILITIES
 * ============================================================ */

/* Body Text Sizes */
.ps-body-sm {
	font-size: var(--ps-text-sm);
	line-height: var(--ps-leading-normal);
}

.ps-body-base {
	font-size: var(--ps-text-base);
	line-height: var(--ps-leading-normal);
}

.ps-body-lg {
	font-size: var(--ps-text-lg);
	line-height: var(--ps-leading-relaxed);
}

/* Overline Text */
.ps-overline {
	font-size: var(--ps-text-xs);
	font-weight: var(--ps-font-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: var(--ps-leading-tight);
}

/* Text Width Constraints (for optimal readability) */
.ps-prose-sm {
	max-width: var(--ps-prose-sm);
}

.ps-prose,
.ps-prose-base {
	max-width: var(--ps-prose-base);
}

.ps-prose-lg {
	max-width: var(--ps-prose-lg);
}

/* Responsive Heading Styles with Clamp */
.ps-h1 {
	font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
	line-height: var(--ps-leading-tight);
	font-weight: var(--ps-font-bold);
	margin-bottom: var(--ps-space-lg);
}

.ps-h2 {
	font-size: clamp(1.75rem, 4vw + 0.75rem, 2.75rem);
	line-height: var(--ps-leading-tight);
	font-weight: var(--ps-font-bold);
	margin-bottom: var(--ps-space-md);
}

.ps-h3 {
	font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
	line-height: var(--ps-leading-snug);
	font-weight: var(--ps-font-semibold);
	margin-bottom: var(--ps-space-md);
}

.ps-h4 {
	font-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
	line-height: var(--ps-leading-snug);
	font-weight: var(--ps-font-semibold);
	margin-bottom: var(--ps-space-sm);
}

.ps-h5 {
	font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
	line-height: var(--ps-leading-normal);
	font-weight: var(--ps-font-medium);
	margin-bottom: var(--ps-space-sm);
}

.ps-h6 {
	font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
	line-height: var(--ps-leading-normal);
	font-weight: var(--ps-font-medium);
	margin-bottom: var(--ps-space-sm);
}

/* Display Headings (Extra Large) */
.ps-display-1 {
	font-size: clamp(3rem, 8vw + 1rem, 6rem);
	line-height: var(--ps-leading-none);
	font-weight: var(--ps-font-extrabold);
	letter-spacing: -0.02em;
}

.ps-display-2 {
	font-size: clamp(2.5rem, 6vw + 1rem, 5rem);
	line-height: var(--ps-leading-none);
	font-weight: var(--ps-font-extrabold);
	letter-spacing: -0.02em;
}

.ps-display-3 {
	font-size: clamp(2rem, 5vw + 1rem, 4rem);
	line-height: var(--ps-leading-tight);
	font-weight: var(--ps-font-bold);
	letter-spacing: -0.01em;
}

/* ============================================================
 * UTILITY CLASSES
 * ============================================================ */

/* Border Radius */
.ps-rounded-sm { border-radius: var(--ps-radius-sm); }
.ps-rounded-md { border-radius: var(--ps-radius-md); }
.ps-rounded-lg { border-radius: var(--ps-radius-lg); }
.ps-rounded-xl { border-radius: var(--ps-radius-xl); }
.ps-rounded-2xl { border-radius: var(--ps-radius-2xl); }
.ps-rounded-full { border-radius: var(--ps-radius-full); }
.ps-rounded-none { border-radius: 0; }

/* Shadows */
.ps-shadow-sm { box-shadow: var(--ps-shadow-sm); }
.ps-shadow { box-shadow: var(--ps-shadow); }
.ps-shadow-md { box-shadow: var(--ps-shadow-md); }
.ps-shadow-lg { box-shadow: var(--ps-shadow-lg); }
.ps-shadow-xl { box-shadow: var(--ps-shadow-xl); }
.ps-shadow-2xl { box-shadow: var(--ps-shadow-2xl); }
.ps-shadow-none { box-shadow: none; }

/* Hover Shadows */
.ps-hover-shadow-sm:hover { box-shadow: var(--ps-shadow-sm); }
.ps-hover-shadow:hover { box-shadow: var(--ps-shadow); }
.ps-hover-shadow-md:hover { box-shadow: var(--ps-shadow-md); }
.ps-hover-shadow-lg:hover { box-shadow: var(--ps-shadow-lg); }
.ps-hover-shadow-xl:hover { box-shadow: var(--ps-shadow-xl); }
.ps-hover-shadow-2xl:hover { box-shadow: var(--ps-shadow-2xl); }

/* Transitions */
.ps-transition { transition: all var(--ps-transition-base); }
.ps-transition-fast { transition: all var(--ps-transition-fast); }
.ps-transition-slow { transition: all var(--ps-transition-slow); }

/* Text Alignment */
.ps-text-left { text-align: left; }
.ps-text-center { text-align: center; }
.ps-text-right { text-align: right; }
.ps-text-justify { text-align: justify; }

/* Font Weights */
.ps-font-light { font-weight: var(--ps-font-light); }
.ps-font-normal { font-weight: var(--ps-font-normal); }
.ps-font-medium { font-weight: var(--ps-font-medium); }
.ps-font-semibold { font-weight: var(--ps-font-semibold); }
.ps-font-bold { font-weight: var(--ps-font-bold); }
.ps-font-extrabold { font-weight: var(--ps-font-extrabold); }

/* ============================================================
 * BUTTON UTILITIES
 * ============================================================ */

/* Primary Button */
.ps-button-primary {
	align-items: center;
	background-color: var(--ps-color-primary);
	color: var(--ps-white);
	display: inline-flex;
	text-decoration: none;
	padding: 1rem 2rem;
	border-radius: var(--ps-radius-md);
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-primary:is(:hover, :focus) {
	background-color: var(--ps-color-primary-dark);
	color: var(--ps-white);
}

/* Secondary Button */
.ps-button-secondary {
	align-items: center;
	background-color: var(--ps-color-secondary);
	color: var(--ps-white);
	display: inline-flex;
	text-decoration: none;
	padding: 1rem 2rem;
	border-radius: var(--ps-radius-md);
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-secondary:is(:hover, :focus) {
	background-color: var(--ps-color-secondary-dark);
	color: var(--ps-white);
}

/* White Button */
.ps-button-white {
	align-items: center;
	background-color: var(--ps-white);
	color: var(--ps-black);
	display: inline-flex;
	text-decoration: none;
	border: 1px solid var(--ps-black);
	padding: 1rem 2rem;
	border-radius: var(--ps-radius-md);
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-white:is(:hover, :focus) {
	background-color: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}

/* Text-Only Button */
.ps-button-text-only {
	align-items: center;
	color: var(--ps-black);
	display: inline-flex;
	text-decoration: none;
	transition: all var(--ps-transition-base);
	cursor: pointer;
}

.ps-button-text-only:is(:hover, :focus) {
	color: var(--ps-color-primary);
	text-decoration: underline;
}

/* ============================================================
 * PADDING UTILITIES
 * ============================================================ */

/* All Sides Padding */
.ps-p-0 { padding: 0; }
.ps-p-xs { padding: var(--ps-space-xs); }
.ps-p-sm { padding: var(--ps-space-sm); }
.ps-p-md { padding: var(--ps-space-md); }
.ps-p-lg { padding: var(--ps-space-lg); }
.ps-p-xl { padding: var(--ps-space-xl); }
.ps-p-2xl { padding: var(--ps-space-2xl); }
.ps-p-3xl { padding: var(--ps-space-3xl); }

/* Vertical Padding */
.ps-py-0 { padding-block: 0; }
.ps-py-xs { padding-block: var(--ps-space-xs); }
.ps-py-sm { padding-block: var(--ps-space-sm); }
.ps-py-md { padding-block: var(--ps-space-md); }
.ps-py-lg { padding-block: var(--ps-space-lg); }
.ps-py-xl { padding-block: var(--ps-space-xl); }
.ps-py-2xl { padding-block: var(--ps-space-2xl); }
.ps-py-3xl { padding-block: var(--ps-space-3xl); }

/* Horizontal Padding */
.ps-px-0 { padding-inline: 0; }
.ps-px-xs { padding-inline: var(--ps-space-xs); }
.ps-px-sm { padding-inline: var(--ps-space-sm); }
.ps-px-md { padding-inline: var(--ps-space-md); }
.ps-px-lg { padding-inline: var(--ps-space-lg); }
.ps-px-xl { padding-inline: var(--ps-space-xl); }
.ps-px-2xl { padding-inline: var(--ps-space-2xl); }
.ps-px-3xl { padding-inline: var(--ps-space-3xl); }

/* Individual Side Padding */
.ps-pt-0 { padding-top: 0; }
.ps-pt-xs { padding-top: var(--ps-space-xs); }
.ps-pt-sm { padding-top: var(--ps-space-sm); }
.ps-pt-md { padding-top: var(--ps-space-md); }
.ps-pt-lg { padding-top: var(--ps-space-lg); }
.ps-pt-xl { padding-top: var(--ps-space-xl); }
.ps-pt-2xl { padding-top: var(--ps-space-2xl); }
.ps-pt-3xl { padding-top: var(--ps-space-3xl); }

.ps-pb-0 { padding-bottom: 0; }
.ps-pb-xs { padding-bottom: var(--ps-space-xs); }
.ps-pb-sm { padding-bottom: var(--ps-space-sm); }
.ps-pb-md { padding-bottom: var(--ps-space-md); }
.ps-pb-lg { padding-bottom: var(--ps-space-lg); }
.ps-pb-xl { padding-bottom: var(--ps-space-xl); }
.ps-pb-2xl { padding-bottom: var(--ps-space-2xl); }
.ps-pb-3xl { padding-bottom: var(--ps-space-3xl); }

.ps-pl-0 { padding-left: 0; }
.ps-pl-xs { padding-left: var(--ps-space-xs); }
.ps-pl-sm { padding-left: var(--ps-space-sm); }
.ps-pl-md { padding-left: var(--ps-space-md); }
.ps-pl-lg { padding-left: var(--ps-space-lg); }
.ps-pl-xl { padding-left: var(--ps-space-xl); }
.ps-pl-2xl { padding-left: var(--ps-space-2xl); }
.ps-pl-3xl { padding-left: var(--ps-space-3xl); }

.ps-pr-0 { padding-right: 0; }
.ps-pr-xs { padding-right: var(--ps-space-xs); }
.ps-pr-sm { padding-right: var(--ps-space-sm); }
.ps-pr-md { padding-right: var(--ps-space-md); }
.ps-pr-lg { padding-right: var(--ps-space-lg); }
.ps-pr-xl { padding-right: var(--ps-space-xl); }
.ps-pr-2xl { padding-right: var(--ps-space-2xl); }
.ps-pr-3xl { padding-right: var(--ps-space-3xl); }

/* Container/Section Specific Padding */
.ps-section-sm { padding: var(--ps-section-sm) var(--ps-section-h); }
.ps-section-md { padding: var(--ps-space-4xl) var(--ps-section-h); }
.ps-section-lg { padding: var(--ps-space-5xl) var(--ps-section-h); }
.ps-section-xl { padding: var(--ps-space-6xl) var(--ps-section-h); }

.ps-section-top-heavy { padding: var(--ps-space-6xl) var(--ps-section-h) var(--ps-section-sm); }
.ps-section-bottom-heavy { padding: var(--ps-section-sm) var(--ps-section-h) var(--ps-space-6xl); }

/* ============================================================
 * MARGIN UTILITIES
 * ============================================================ */

/* All Sides Margin */
.ps-m-0 { margin: 0; }
.ps-m-auto { margin: auto; }
.ps-m-xs { margin: var(--ps-space-xs); }
.ps-m-sm { margin: var(--ps-space-sm); }
.ps-m-md { margin: var(--ps-space-md); }
.ps-m-lg { margin: var(--ps-space-lg); }
.ps-m-xl { margin: var(--ps-space-xl); }
.ps-m-2xl { margin: var(--ps-space-2xl); }
.ps-m-3xl { margin: var(--ps-space-3xl); }

/* Vertical Margin */
.ps-my-0 { margin-block: 0; }
.ps-my-auto { margin-block: auto; }
.ps-my-xs { margin-block: var(--ps-space-xs); }
.ps-my-sm { margin-block: var(--ps-space-sm); }
.ps-my-md { margin-block: var(--ps-space-md); }
.ps-my-lg { margin-block: var(--ps-space-lg); }
.ps-my-xl { margin-block: var(--ps-space-xl); }
.ps-my-2xl { margin-block: var(--ps-space-2xl); }
.ps-my-3xl { margin-block: var(--ps-space-3xl); }

/* Horizontal Margin */
.ps-mx-0 { margin-inline: 0; }
.ps-mx-auto { margin-inline: auto; }
.ps-mx-xs { margin-inline: var(--ps-space-xs); }
.ps-mx-sm { margin-inline: var(--ps-space-sm); }
.ps-mx-md { margin-inline: var(--ps-space-md); }
.ps-mx-lg { margin-inline: var(--ps-space-lg); }
.ps-mx-xl { margin-inline: var(--ps-space-xl); }
.ps-mx-2xl { margin-inline: var(--ps-space-2xl); }
.ps-mx-3xl { margin-inline: var(--ps-space-3xl); }

/* Individual Side Margin */
.ps-mt-0 { margin-top: 0; }
.ps-mt-auto { margin-top: auto; }
.ps-mt-xs { margin-top: var(--ps-space-xs); }
.ps-mt-sm { margin-top: var(--ps-space-sm); }
.ps-mt-md { margin-top: var(--ps-space-md); }
.ps-mt-lg { margin-top: var(--ps-space-lg); }
.ps-mt-xl { margin-top: var(--ps-space-xl); }
.ps-mt-2xl { margin-top: var(--ps-space-2xl); }
.ps-mt-3xl { margin-top: var(--ps-space-3xl); }

.ps-mb-0 { margin-bottom: 0; }
.ps-mb-auto { margin-bottom: auto; }
.ps-mb-xs { margin-bottom: var(--ps-space-xs); }
.ps-mb-sm { margin-bottom: var(--ps-space-sm); }
.ps-mb-md { margin-bottom: var(--ps-space-md); }
.ps-mb-lg { margin-bottom: var(--ps-space-lg); }
.ps-mb-xl { margin-bottom: var(--ps-space-xl); }
.ps-mb-2xl { margin-bottom: var(--ps-space-2xl); }
.ps-mb-3xl { margin-bottom: var(--ps-space-3xl); }

.ps-ml-0 { margin-left: 0; }
.ps-ml-auto { margin-left: auto; }
.ps-ml-xs { margin-left: var(--ps-space-xs); }
.ps-ml-sm { margin-left: var(--ps-space-sm); }
.ps-ml-md { margin-left: var(--ps-space-md); }
.ps-ml-lg { margin-left: var(--ps-space-lg); }
.ps-ml-xl { margin-left: var(--ps-space-xl); }
.ps-ml-2xl { margin-left: var(--ps-space-2xl); }
.ps-ml-3xl { margin-left: var(--ps-space-3xl); }

.ps-mr-0 { margin-right: 0; }
.ps-mr-auto { margin-right: auto; }
.ps-mr-xs { margin-right: var(--ps-space-xs); }
.ps-mr-sm { margin-right: var(--ps-space-sm); }
.ps-mr-md { margin-right: var(--ps-space-md); }
.ps-mr-lg { margin-right: var(--ps-space-lg); }
.ps-mr-xl { margin-right: var(--ps-space-xl); }
.ps-mr-2xl { margin-right: var(--ps-space-2xl); }
.ps-mr-3xl { margin-right: var(--ps-space-3xl); }

/* Centered Element (margin auto shorthand) */
.ps-centered { margin-inline: auto; }

/* ============================================================
 * POSITION UTILITIES
 * ============================================================ */

.ps-static { position: static; }
.ps-relative { position: relative; }
.ps-absolute { position: absolute; }
.ps-fixed { position: fixed; }
.ps-sticky { position: sticky; }

/* Positioning Values */
.ps-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.ps-top-0 { top: 0; }
.ps-right-0 { right: 0; }
.ps-bottom-0 { bottom: 0; }
.ps-left-0 { left: 0; }

/* ============================================================
 * STICKY UTILITIES
 * ============================================================ */

.ps-sticky-parent {
	position: relative;
	height: 100%;
}

.ps-sticky-top {
	position: sticky;
	top: 0;
	z-index: 10;
}

.ps-sticky-bottom {
	position: sticky;
	bottom: 0;
	z-index: 10;
}

/* ============================================================
 * GRID UTILITIES
 * ============================================================ */

.ps-grid {
	display: grid;
}

.footer-widget-2 ul#menu-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Grid with Auto-fit and Minmax */
.ps-grid-auto-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--ps-space-lg);
}

.ps-grid-auto-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--ps-space-lg);
}

.ps-grid-auto-4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--ps-space-lg);
}

/* Fixed Column Grids (responsive) */
.ps-grid-cols-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.ps-grid-cols-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.ps-grid-cols-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

/* Mobile: stack columns */
@media (max-width: 768px) {
	.ps-grid-cols-2,
	.ps-grid-cols-3,
	.ps-grid-cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * FLEXBOX UTILITIES
 * ============================================================ */

.ps-flex { display: flex; }
.ps-inline-flex { display: inline-flex; }

/* Flex Direction */
.ps-flex-row { flex-direction: row; }
.ps-flex-row-reverse { flex-direction: row-reverse; }
.ps-flex-col { flex-direction: column; }
.ps-flex-col-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.ps-flex-wrap { flex-wrap: wrap; }
.ps-flex-nowrap { flex-wrap: nowrap; }
.ps-flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.ps-justify-start { justify-content: flex-start; }
.ps-justify-end { justify-content: flex-end; }
.ps-justify-center { justify-content: center; }
.ps-justify-between { justify-content: space-between; }
.ps-justify-around { justify-content: space-around; }
.ps-justify-evenly { justify-content: space-evenly; }

/* Align Items */
.ps-items-start { align-items: flex-start; }
.ps-items-end { align-items: flex-end; }
.ps-items-center { align-items: center; }
.ps-items-baseline { align-items: baseline; }
.ps-items-stretch { align-items: stretch; }

/* Align Content */
.ps-content-start { align-content: flex-start; }
.ps-content-end { align-content: flex-end; }
.ps-content-center { align-content: center; }
.ps-content-between { align-content: space-between; }
.ps-content-around { align-content: space-around; }
.ps-content-evenly { align-content: space-evenly; }

/* Align Self */
.ps-self-auto { align-self: auto; }
.ps-self-start { align-self: flex-start; }
.ps-self-end { align-self: flex-end; }
.ps-self-center { align-self: center; }
.ps-self-stretch { align-self: stretch; }

/* Flex Grow & Shrink */
.ps-flex-1 { flex: 1 1 0%; }
.ps-flex-auto { flex: 1 1 auto; }
.ps-flex-initial { flex: 0 1 auto; }
.ps-flex-none { flex: none; }

.ps-flex-grow { flex-grow: 1; }
.ps-flex-grow-0 { flex-grow: 0; }

.ps-flex-shrink { flex-shrink: 1; }
.ps-flex-shrink-0 { flex-shrink: 0; }

/* ============================================================
 * GAP UTILITIES
 * ============================================================ */

/* Gap (for both grid and flexbox) */
.ps-gap-0 { gap: 0; }
.ps-gap-xs { gap: var(--ps-space-xs); }
.ps-gap-sm { gap: var(--ps-space-sm); }
.ps-gap-md { gap: var(--ps-space-md); }
.ps-gap-lg { gap: var(--ps-space-lg); }
.ps-gap-xl { gap: var(--ps-space-xl); }
.ps-gap-2xl { gap: var(--ps-space-2xl); }
.ps-gap-3xl { gap: var(--ps-space-3xl); }

/* Row Gap */
.ps-row-gap-0 { row-gap: 0; }
.ps-row-gap-xs { row-gap: var(--ps-space-xs); }
.ps-row-gap-sm { row-gap: var(--ps-space-sm); }
.ps-row-gap-md { row-gap: var(--ps-space-md); }
.ps-row-gap-lg { row-gap: var(--ps-space-lg); }
.ps-row-gap-xl { row-gap: var(--ps-space-xl); }
.ps-row-gap-2xl { row-gap: var(--ps-space-2xl); }
.ps-row-gap-3xl { row-gap: var(--ps-space-3xl); }

/* Column Gap */
.ps-col-gap-0 { column-gap: 0; }
.ps-col-gap-xs { column-gap: var(--ps-space-xs); }
.ps-col-gap-sm { column-gap: var(--ps-space-sm); }
.ps-col-gap-md { column-gap: var(--ps-space-md); }
.ps-col-gap-lg { column-gap: var(--ps-space-lg); }
.ps-col-gap-xl { column-gap: var(--ps-space-xl); }
.ps-col-gap-2xl { column-gap: var(--ps-space-2xl); }
.ps-col-gap-3xl { column-gap: var(--ps-space-3xl); }

/* ============================================================
 * EFFECT UTILITIES
 * ============================================================ */

/* Drop Shadow (filter-based) */
.ps-drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }
.ps-drop-shadow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); }
.ps-drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)); }
.ps-drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)); }
.ps-drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)); }
.ps-drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); }
.ps-drop-shadow-none { filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }

/* Scale */
.ps-scale-50 { transform: scale(0.5); }
.ps-scale-75 { transform: scale(0.75); }
.ps-scale-90 { transform: scale(0.9); }
.ps-scale-95 { transform: scale(0.95); }
.ps-scale-100 { transform: scale(1); }
.ps-scale-105 { transform: scale(1.05); }
.ps-scale-110 { transform: scale(1.1); }
.ps-scale-125 { transform: scale(1.25); }
.ps-scale-150 { transform: scale(1.5); }

/* Scale on Hover */
.ps-hover-scale:hover { transform: scale(1.05); }
.ps-hover-scale-lg:hover { transform: scale(1.1); }

/* Blur */
.ps-blur-none { filter: blur(0); }
.ps-blur-sm { filter: blur(4px); }
.ps-blur { filter: blur(8px); }
.ps-blur-md { filter: blur(12px); }
.ps-blur-lg { filter: blur(16px); }
.ps-blur-xl { filter: blur(24px); }
.ps-blur-2xl { filter: blur(40px); }
.ps-blur-3xl { filter: blur(64px); }