/* Design tokens + reset shared by every tool. Loaded only on tool pages
 * (see Assets::maybe_enqueue_tool_assets) — never enqueued site-wide.
 *
 * Each token resolves to the active theme's own custom property first
 * (--lm-* is letramania's, defined site-wide in its tokens.css) and falls
 * back to this plugin's original generic value when that isn't defined —
 * e.g. under a theme other than letramania. This keeps the tool visually
 * "part of the site" without hard-coupling the plugin to any one theme. */

:root {
	--ldh-color-bg: var(--lm-bg, #fafafa);
	--ldh-color-surface: var(--lm-surface, #ffffff);
	--ldh-color-text: var(--lm-text, #1a1a1a);
	--ldh-color-muted: var(--lm-text-secondary, #666666);
	--ldh-color-border: var(--lm-border, #e5e5e5);
	--ldh-color-accent: var(--lm-brand, #6366f1);
	--ldh-color-success: #10b981;
	--ldh-radius: var(--lm-radius-lg, 12px);
	--ldh-radius-sm: var(--lm-radius-sm, 8px);
	--ldh-space-xs: var(--lm-space-1, 4px);
	--ldh-space-sm: var(--lm-space-2, 8px);
	--ldh-space-md: var(--lm-space-4, 16px);
	--ldh-space-lg: var(--lm-space-6, 24px);
	--ldh-font-sans: var(--lm-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--ldh-font-mono: var(--lm-font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
}

.ldh-tool,
.ldh-tool * {
	box-sizing: border-box;
}

/* The tool's wrapper isn't the markup any given theme expects (no
 * #primary.content-area + sidebar pairing — see
 * CPT_Ferramenta::force_no_sidebar()), so it can be shrink-to-fit or
 * float-constrained by that theme's own layout CSS. The !importants
 * neutralize that regardless of which theme is active; the max-width
 * itself mirrors letramania's own .lm-section container (falls back to
 * the same 1120px under any other theme). */
.ldh-tool-page {
	width: 100% !important;
	max-width: var(--lm-container, 1120px) !important;
	float: none !important;
	margin-inline: auto;
	padding-inline: var(--lm-gutter, 16px);
	padding-bottom: var(--ldh-space-lg);
	box-sizing: border-box;
}

.ldh-tool-page__title {
	margin: 0 0 var(--ldh-space-md);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ldh-color-text);
}

@media (min-width: 641px) {
	.ldh-tool-page__title {
		font-size: 32px;
	}
}

.ldh-tool {
	font-family: var(--ldh-font-sans);
	color: var(--ldh-color-text);
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.ldh-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}