/**
 * FULFA Design Variables & Utilities
 * B2B Fulfillment / Logistics Theme System
 *
 * Custom variables and base layouts mapping to Blocksy design tokens.
 */

:root {
	/* Brand Color Palette - mapped directly to Blocksy customizer tokens */
	--fulfa-color-primary: var(--theme-palette-color-1, #316D39);
	--fulfa-color-secondary: var(--theme-palette-color-2, #24572D);
	--fulfa-color-text: var(--theme-palette-color-3, #243126);
	--fulfa-color-dark: var(--theme-palette-color-4, #102416);
	--fulfa-color-border: var(--theme-palette-color-5, #DCE8DE);
	--fulfa-color-bg-light: var(--theme-palette-color-7, #F8FAF7);
	--fulfa-color-bg-white: var(--theme-palette-color-8, #FFFFFF);
	--fulfa-color-accent: var(--theme-palette-color-1, #316D39);

	/* Muted Text Color Helper (High Contrast Muted B2B) */
	--fulfa-color-muted: color-mix(in srgb, var(--fulfa-color-text) 78%, white);

	/* Spacing Scale (Structured Layouts & Breathing Space) */
	--fulfa-space-xs: 0.5rem;   /* 8px */
	--fulfa-space-sm: 1rem;     /* 16px */
	--fulfa-space-md: 1.5rem;   /* 24px */
	--fulfa-space-lg: 2.5rem;   /* 40px */
	--fulfa-space-xl: 4rem;     /* 64px */
	--fulfa-space-xxl: 6rem;    /* 96px */

	/* Border & Radius Style */
	--fulfa-border-width: 1px;
	--fulfa-border-radius: 4px; /* Structured & sharp industrial style, avoid bubble borders */
	--fulfa-solid-border: var(--fulfa-border-width) solid var(--fulfa-color-border);

	/* Restrained Micro-Animations (Intensity: 3/10) */
	--fulfa-transition-duration: 0.25s;
	--fulfa-transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth decelerating curve */
	--fulfa-transition: all var(--fulfa-transition-duration) var(--fulfa-transition-timing);
}

/* -------------------------------------------------------------
 * Layout Utilities
 * ------------------------------------------------------------- */

/* Standard Container with Blocksy Width */
.fulfa-container {
	width: 100%;
	max-width: var(--theme-container-width, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--fulfa-space-md);
	padding-right: var(--fulfa-space-md);
}

/* Sections with clamp-based breathing room */
.fulfa-section {
	padding-top: clamp(var(--fulfa-space-xl), 8vw, var(--fulfa-space-xxl));
	padding-bottom: clamp(var(--fulfa-space-xl), 8vw, var(--fulfa-space-xxl));
	position: relative;
}

.fulfa-section-light {
	background-color: var(--fulfa-color-bg-light);
}

.fulfa-section-dark {
	background-color: var(--fulfa-color-primary);
	color: var(--fulfa-color-bg-white);
}

.fulfa-section-dark h1,
.fulfa-section-dark h2,
.fulfa-section-dark h3,
.fulfa-section-dark h4 {
	color: var(--fulfa-color-bg-white);
}

/* Structured Grid with subtle lines (dashboard/industrial style) */
.fulfa-grid-structured {
	display: grid;
	border: var(--fulfa-solid-border);
	background-color: var(--fulfa-color-border);
	gap: var(--fulfa-border-width);
}

.fulfa-grid-structured > * {
	background-color: var(--fulfa-color-bg-white);
	padding: clamp(var(--fulfa-space-md), 4vw, var(--fulfa-space-lg));
}

/* Grid layout options */
.fulfa-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-lg);
}

.fulfa-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-lg);
}

.fulfa-grid-4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fulfa-space-md);
}

@media (min-width: 768px) {
	.fulfa-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.fulfa-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.fulfa-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fulfa-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Flexbox utilities */
.fulfa-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fulfa-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}