/* =============================================================================
 * utilities.css · Custom helper classes, print, accessibility, and transitions
 * ─────────────────────────────────────────────────────────────────────────────
 * Contains custom layout utility classes, interaction states, font families,
 * print stylesheet rules, and reduced motion configurations.
 * ========================================================================== */

.img-placeholder {
	background-color: var(--placeholder-bg);
	background-image: repeating-linear-gradient(
		135deg,
		var(--placeholder-stripe) 0,
		var(--placeholder-stripe) 1px,
		transparent 1px,
		transparent 0.875rem
	);
	position: relative;
	overflow: hidden;
}

.ml-control-surface--secondary {
	border-color: var(--border-strong);
	background: var(--button);
	color: var(--primary);
}

.ml-control-surface--secondary:not(:disabled):not([aria-disabled="true"]):not(
		[data-disabled="true"]
	):hover {
	border-color: color-mix(in oklch, var(--primary) 35%, transparent);
	background: var(--button-hover);
	color: var(--primary);
}

.ml-control-surface--secondary:not(:disabled):not([aria-disabled="true"]):not(
		[data-disabled="true"]
	):active {
	border-color: color-mix(in oklch, var(--primary) 48%, transparent);
	background: color-mix(in oklch, var(--button-hover) 82%, var(--primary));
	color: var(--primary);
}

.ml-control-surface--secondary[data-active="true"],
.ml-control-surface--secondary[aria-pressed="true"],
.ml-control-surface--secondary[aria-checked="true"] {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--primary-foreground);
}

.ml-control-surface--ghost {
	border-color: transparent;
	background: transparent;
	color: var(--text-body);
}

.ml-control-surface--ghost:not(:disabled):not([aria-disabled="true"]):not(
		[data-disabled="true"]
	):hover {
	background: var(--button-hover);
	color: var(--primary);
}

.ml-control-surface--ghost:not(:disabled):not([aria-disabled="true"]):not(
		[data-disabled="true"]
	):active {
	background: color-mix(in oklch, var(--button-hover) 82%, var(--primary));
	color: var(--primary);
}

.ml-control-surface--ghost[data-active="true"],
.ml-control-surface--ghost[aria-pressed="true"],
.ml-control-surface--ghost[aria-checked="true"] {
	background: color-mix(in oklch, var(--button-hover) 76%, transparent);
	color: var(--primary);
}

.ml-control-surface--secondary[data-disabled="true"],
.ml-control-surface--ghost[data-disabled="true"] {
	border-color: var(--border);
	background: color-mix(in oklch, var(--button) 55%, transparent);
	color: var(--text-muted);
	opacity: 0.58;
}

.ml-control-surface--ghost[data-disabled="true"] {
	border-color: transparent;
	background: transparent;
}

/* --- Transitions & Composable Interaction States --- */
.transition-micro {
	transition:
		background-color var(--duration-micro) var(--ease-out),
		border-color var(--duration-micro) var(--ease-out),
		box-shadow var(--duration-micro) var(--ease-out),
		color var(--duration-micro) var(--ease-out),
		opacity var(--duration-micro) var(--ease-out),
		transform var(--duration-micro) var(--ease-out);
}
.transition-short {
	transition:
		background-color var(--duration-short) var(--ease-out),
		border-color var(--duration-short) var(--ease-out),
		box-shadow var(--duration-short) var(--ease-out),
		color var(--duration-short) var(--ease-out),
		opacity var(--duration-short) var(--ease-out),
		transform var(--duration-short) var(--ease-out-expo);
}
.transition-medium {
	transition:
		opacity var(--duration-medium) var(--ease-out),
		transform var(--duration-medium) var(--ease-out-expo);
}
.transition-long {
	transition:
		opacity var(--duration-long) var(--ease-out),
		transform var(--duration-long) var(--ease-out-expo);
}

@layer utilities {
	.ml-interaction-color {
		transition: color var(--duration-micro) var(--ease-out);
	}

	.ml-interaction-color:hover {
		color: var(--text);
	}

	.ml-interaction-focus {
		transition:
			border-color var(--duration-micro) var(--ease-out),
			box-shadow var(--duration-micro) var(--ease-out);
	}

	.ml-interaction-focus:focus-within {
		border-color: var(--border-strong);
		box-shadow: var(--focus-ring-layered);
	}

	.ml-interaction-surface {
		transition:
			background-color var(--duration-micro) var(--ease-out),
			border-color var(--duration-micro) var(--ease-out),
			box-shadow var(--duration-micro) var(--ease-out),
			color var(--duration-micro) var(--ease-out);
	}

	.ml-interaction-surface:hover {
		border-color: var(--border);
		background: var(--surface);
		color: var(--text);
	}

	.ml-interaction-control {
		transition:
			background-color var(--duration-micro) var(--ease-out),
			border-color var(--duration-micro) var(--ease-out),
			box-shadow var(--duration-micro) var(--ease-out),
			color var(--duration-micro) var(--ease-out);
	}

	.ml-interaction-control:hover {
		border-color: var(--border-strong);
		background: var(--surface-2);
		box-shadow: var(--shadow-sm);
		color: var(--text);
	}

	.ml-interaction-control-primary:hover {
		border-color: var(--btn-primary-hover);
		background: var(--btn-primary-hover);
		box-shadow: var(--shadow-sm);
	}

	.ml-interaction-tab {
		transition:
			background-color var(--duration-micro) var(--ease-out),
			box-shadow var(--duration-micro) var(--ease-out),
			color var(--duration-micro) var(--ease-out);
	}

	.ml-interaction-tab:hover {
		color: var(--text);
	}

	.ml-interaction-tab-underline {
		transition:
			border-color var(--duration-micro) var(--ease-out),
			color var(--duration-micro) var(--ease-out);
	}

	.ml-interaction-tab-underline:hover {
		color: var(--text);
	}
}

/* --- Reduced Motion (prefers-reduced-motion: reduce) --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.ml-card--hover:hover,
	.ml-card--interactive:hover {
		transform: none;
	}
	.ml-card--hover:hover .ml-card__image > * {
		transform: none;
	}
}

/* --- Print Stylesheet --- */
@media print {
	:root,
	.dark,
	[data-theme="dark"] {
		--background: #ffffff;
		--foreground: #000000;
		--text: #000000;
		--text-body: #000000;
		--text-secondary: #333333;
		--text-muted: #666666;
		--surface: #ffffff;
		--border: #cccccc;
		color-scheme: light;
	}
	body {
		background: #fff;
		color: #000;
	}
	nav,
	.navbar,
	footer,
	.footer,
	button {
		display: none !important;
	}
	.prose,
	.prose * {
		color: #000 !important;
	}
	a {
		color: #000;
		text-decoration: underline;
	}
	a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #666;
	}
}

/* --- Font Family Utility Classes (beyond Tailwind's default set) --- */
.font-sans {
	font-family: var(--font-sans);
}
.font-mono {
	font-family: var(--font-mono);
}
.font-script {
	font-family: var(--font-script);
}
.font-headline {
	font-family: var(--font-headline);
}

/* --- Eyebrow utility (standalone class, no component import needed) --- */
.eyebrow,
.ml-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	display: inline-block;
}