/* ==========================================================================
   Dabar Blocks Base
   Shared tokens, base layout and common components.
   ========================================================================== */

:root {
	--dabar-blocks-bg: var(--wp--preset--color--background, #f5f5f7);
	--dabar-blocks-surface: var(--wp--preset--color--base, #ffffff);
	--dabar-blocks-text: var(--wp--preset--color--contrast, currentColor);
	--dabar-blocks-muted: color-mix(in srgb, currentColor 62%, transparent);
	--dabar-blocks-border: rgba(29, 29, 31, 0.08);

	--dabar-blocks-button-bg: var(--wp--preset--color--primary, #111111);
	--dabar-blocks-button-text: var(--wp--preset--color--base, #ffffff);

	--dabar-blocks-radius: 28px;
	--dabar-blocks-radius-lg: 44px;

	--dabar-blocks-shadow-soft:
		0 1px 2px rgba(0, 0, 0, 0.025),
		0 14px 36px rgba(0, 0, 0, 0.045);

	--dabar-blocks-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 24px 72px rgba(0, 0, 0, 0.075);

	--dabar-blocks-transition: 220ms ease;
}

/* Base */

.dabar-block {
	width: 100%;
	max-width: none;
	margin-top: 32px;
	margin-bottom: 32px;
	color: inherit;
	font-family: inherit;
}

.dabar-block,
.dabar-block *,
.dabar-block *::before,
.dabar-block *::after {
	box-sizing: border-box;
}

.dabar-block * {
	font-family: inherit;
}

.dabar-block img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Button */

.dabar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.82rem 1.12rem;
	background: var(--dabar-blocks-button-bg);
	color: var(--dabar-blocks-button-text);
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--dabar-blocks-transition),
		opacity var(--dabar-blocks-transition),
		background-color var(--dabar-blocks-transition),
		color var(--dabar-blocks-transition),
		border-color var(--dabar-blocks-transition);
}

.dabar-button:visited,
.dabar-button:hover {
	color: var(--dabar-blocks-button-text);
	text-decoration: none;
}

.dabar-button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Responsive base */

@media (max-width: 767px) {
	.dabar-block {
		margin-top: 24px;
		margin-bottom: 24px;
	}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.dabar-button {
		transition: none;
	}

	.dabar-button:hover {
		transform: none;
	}
}