/* ==========================================================================
   DRPM Foundation – design system Tokens + Utilities
   Why: единый масштаб отступов, радиусов, теней и утилит ускоряет работу,
   исключает хаос в значениях и защищает от коллизий в WordPress.
   Префикс: drpm-
   Base: html { font-size: 62.5%; } (0.625rem = 10px from Bricks Builder)
   ========================================================================== */

/* ---------- 1) Tokens ---------- */
:root {
	/* Spacing scale (4px baseline) */
	--drpm-space-unit: 4px;
	--drpm-space-0: 0px;
	--drpm-space-0_5: calc(0.5 * var(--drpm-space-unit));  /* 2px */
	--drpm-space-1: calc(1 * var(--drpm-space-unit));      /* 4px */
	--drpm-space-1_5: calc(1.5 * var(--drpm-space-unit));  /* 6px */
	--drpm-space-2: calc(2 * var(--drpm-space-unit));      /* 8px */
	--drpm-space-2_5: calc(2.5 * var(--drpm-space-unit));  /* 10px */
	--drpm-space-3: calc(3 * var(--drpm-space-unit));      /* 12px */
	--drpm-space-3_5: calc(3.5 * var(--drpm-space-unit));  /* 14px */
	--drpm-space-4: calc(4 * var(--drpm-space-unit));      /* 16px */
	--drpm-space-5: calc(5 * var(--drpm-space-unit));      /* 20px */
	--drpm-space-6: calc(6 * var(--drpm-space-unit));      /* 24px */
	--drpm-space-7: calc(7 * var(--drpm-space-unit));      /* 28px */
	--drpm-space-8: calc(8 * var(--drpm-space-unit));      /* 32px */
	--drpm-space-10: calc(10 * var(--drpm-space-unit));    /* 40px */
	--drpm-space-12: calc(12 * var(--drpm-space-unit));    /* 48px */
	--drpm-space-16: calc(16 * var(--drpm-space-unit));    /* 64px */
	--drpm-space-20: calc(20 * var(--drpm-space-unit));    /* 80px */
	--drpm-space-24: calc(24 * var(--drpm-space-unit));    /* 96px */
	--drpm-space-32: calc(32 * var(--drpm-space-unit));    /* 128px */
	--drpm-space-40: calc(40 * var(--drpm-space-unit));    /* 160px */
	--drpm-space-48: calc(48 * var(--drpm-space-unit));    /* 192px */
	--drpm-space-64: calc(64 * var(--drpm-space-unit));    /* 256px */

	/* Border radius */
	--drpm-radius-none: 0px;
	--drpm-radius-xs: 2px;
	--drpm-radius-sm: 4px;
	--drpm-radius-md: 6px;
	--drpm-radius-lg: 8px;
	--drpm-radius-xl: 12px;
	--drpm-radius-2xl: 16px;
	--drpm-radius-3xl: 20px;
	--drpm-radius-4xl: 24px;
	--drpm-radius-full: 9999px;

	/* Shadows - design system */
	--drpm-shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
	--drpm-shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
	--drpm-shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
	--drpm-shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
	--drpm-shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03);
	--drpm-shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18);
	--drpm-shadow-3xl: 0px 32px 64px -12px rgba(10, 13, 18, 0.14);

	/* Focus rings */
	--drpm-focus-ring: 0 0 0 2px var(--drpml-color-white), 0 0 0 4px var(--drpml-color-primary-500);
	--drpm-focus-ring-error: 0 0 0 2px var(--drpml-color-white), 0 0 0 4px var(--drpml-color-error-500);
	--drpm-focus-ring-subtle: 0 0 0 4px rgb(80 124 109 / 0.08); /* Subtle focus for tags/badges */

	/* Backdrop blur */
	--drpm-blur-sm: blur(4px);
	--drpm-blur-md: blur(8px);
	--drpm-blur-lg: blur(12px);
	--drpm-blur-xl: blur(20px);

	/* Layout */
	--drpm-container-max: 1280px;
	--drpm-container-pad-mobile: var(--drpm-space-4);
	--drpm-container-pad-desktop: var(--drpm-space-8);
	--drpm-grid-gap: var(--drpm-space-6);

	/* Breakpoints (for reference) */
	--drpm-bp-desktop: 1280px;
	--drpm-bp-tablet: 768px;
	--drpm-bp-mobile: 375px;
}

/* ---------- 2) Container ---------- */
.drpm-container {
	width: 100%;
	max-width: var(--drpm-container-max);
	margin-inline: auto;
	padding-inline: var(--drpm-container-pad-mobile);
}

@media (min-width: 1024px) {
	.drpm-container {
		padding-inline: var(--drpm-container-pad-desktop);
	}
}

/* ---------- 3) Grids ---------- */
.drpm-grid-12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--drpm-grid-gap);
}

.drpm-grid-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--drpm-grid-gap);
}

.drpm-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--drpm-grid-gap);
}

.drpm-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--drpm-grid-gap);
}

.drpm-grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--drpm-grid-gap);
}

/* ---------- 4) Spacing Utilities ---------- */
.drpm-m-0 { margin: var(--drpm-space-0); }
.drpm-m-1 { margin: var(--drpm-space-1); }
.drpm-m-2 { margin: var(--drpm-space-2); }
.drpm-m-3 { margin: var(--drpm-space-3); }
.drpm-m-4 { margin: var(--drpm-space-4); }
.drpm-m-6 { margin: var(--drpm-space-6); }
.drpm-m-8 { margin: var(--drpm-space-8); }
.drpm-m-12 { margin: var(--drpm-space-12); }

.drpm-p-0 { padding: var(--drpm-space-0); }
.drpm-p-1 { padding: var(--drpm-space-1); }
.drpm-p-2 { padding: var(--drpm-space-2); }
.drpm-p-3 { padding: var(--drpm-space-3); }
.drpm-p-4 { padding: var(--drpm-space-4); }
.drpm-p-6 { padding: var(--drpm-space-6); }
.drpm-p-8 { padding: var(--drpm-space-8); }
.drpm-p-12 { padding: var(--drpm-space-12); }

.drpm-px-4 { padding-inline: var(--drpm-space-4); }
.drpm-px-6 { padding-inline: var(--drpm-space-6); }
.drpm-px-8 { padding-inline: var(--drpm-space-8); }

.drpm-py-4 { padding-block: var(--drpm-space-4); }
.drpm-py-6 { padding-block: var(--drpm-space-6); }
.drpm-py-8 { padding-block: var(--drpm-space-8); }

.drpm-gap-2 { gap: var(--drpm-space-2); }
.drpm-gap-4 { gap: var(--drpm-space-4); }
.drpm-gap-6 { gap: var(--drpm-space-6); }
.drpm-gap-8 { gap: var(--drpm-space-8); }

/* ---------- 5) Radius Utilities ---------- */
.drpm-radius-none { border-radius: var(--drpm-radius-none); }
.drpm-radius-xs { border-radius: var(--drpm-radius-xs); }
.drpm-radius-sm { border-radius: var(--drpm-radius-sm); }
.drpm-radius-md { border-radius: var(--drpm-radius-md); }
.drpm-radius-lg { border-radius: var(--drpm-radius-lg); }
.drpm-radius-xl { border-radius: var(--drpm-radius-xl); }
.drpm-radius-2xl { border-radius: var(--drpm-radius-2xl); }
.drpm-radius-3xl { border-radius: var(--drpm-radius-3xl); }
.drpm-radius-4xl { border-radius: var(--drpm-radius-4xl); }
.drpm-radius-full { border-radius: var(--drpm-radius-full); }

/* ---------- 6) Shadow Utilities ---------- */
.drpm-shadow-xs { box-shadow: var(--drpm-shadow-xs); }
.drpm-shadow-sm { box-shadow: var(--drpm-shadow-sm); }
.drpm-shadow-md { box-shadow: var(--drpm-shadow-md); }
.drpm-shadow-lg { box-shadow: var(--drpm-shadow-lg); }
.drpm-shadow-xl { box-shadow: var(--drpm-shadow-xl); }
.drpm-shadow-2xl { box-shadow: var(--drpm-shadow-2xl); }
.drpm-shadow-3xl { box-shadow: var(--drpm-shadow-3xl); }
.drpm-shadow-none { box-shadow: none; }

/* ---------- 7) Focus Ring Utilities ---------- */
.drpm-focus-ring { box-shadow: var(--drpm-focus-ring); }
.drpm-focus-ring-error { box-shadow: var(--drpm-focus-ring-error); }

/* Focus states for interactive elements */
.drpm-focus-ring:focus,
button.drpm-focus-ring:focus,
input.drpm-focus-ring:focus,
select.drpm-focus-ring:focus,
textarea.drpm-focus-ring:focus {
	outline: none;
	box-shadow: var(--drpm-focus-ring);
}

/* ---------- 8) Backdrop Blur Utilities ---------- */
.drpm-blur-sm {
	backdrop-filter: var(--drpm-blur-sm);
	-webkit-backdrop-filter: var(--drpm-blur-sm);
}

.drpm-blur-md {
	backdrop-filter: var(--drpm-blur-md);
	-webkit-backdrop-filter: var(--drpm-blur-md);
}

.drpm-blur-lg {
	backdrop-filter: var(--drpm-blur-lg);
	-webkit-backdrop-filter: var(--drpm-blur-lg);
}

.drpm-blur-xl {
	backdrop-filter: var(--drpm-blur-xl);
	-webkit-backdrop-filter: var(--drpm-blur-xl);
}

/* ---------- 9) Card Baseline ---------- */
.drpm-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--drpm-radius-lg);
	padding: var(--drpm-space-6);
}

.drpm-card--tight {
	padding: var(--drpm-space-4);
	border-radius: var(--drpm-radius-md);
}

.drpm-card--loose {
	padding: var(--drpm-space-8);
	border-radius: var(--drpm-radius-xl);
}

/* ---------- 10) Prose (max-width for text) ---------- */
.drpm-prose {
	max-width: 72ch;
}

/* ---------- 11) Helpers ---------- */
.drpm-overflow-hidden {
	overflow: hidden;
}

.drpm-flex {
	display: flex;
}

.drpm-flex-col {
	display: flex;
	flex-direction: column;
}

.drpm-items-center {
	align-items: center;
}

.drpm-justify-center {
	justify-content: center;
}

.drpm-justify-between {
	justify-content: space-between;
}

/* ---------- 12) Common Transitions ---------- */
.drpm-transition {
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drpm-transition-fast {
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.drpm-transition-slow {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}