/* Bosly base: tokens, typography, shared utilities. Colours/fonts come from theme.json presets. */
:root {
	color-scheme: dark;
	--bg: var(--wp--preset--color--background);
	--fg: var(--wp--preset--color--foreground);
	--card: var(--wp--preset--color--card);
	--muted: var(--wp--preset--color--muted);
	--muted-fg: var(--wp--preset--color--muted-foreground);
	--border: var(--wp--preset--color--border);
	--input: var(--wp--preset--color--input);
	--accent-start: var(--wp--preset--color--accent-start);
	--accent-end: var(--wp--preset--color--accent-end);
	--primary: var(--fg);
	--primary-fg: var(--wp--preset--color--ink);
	--radius: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-2xl: var(--wp--custom--radius--xxl);
	--font-display: var(--wp--preset--font-family--display);
	--font-mono: var(--wp--preset--font-family--mono);
	--ease: var(--wp--custom--motion--ease);
	--header-h: var(--wp--custom--header-height);
	--gutter: var(--wp--custom--gutter--mobile);
	--container: 80rem;
}
@media (min-width: 768px) { :root { --gutter: var(--wp--custom--gutter--desktop); } }

/* Scope that flips to the light palette (used by the solid inner-page header only). */
.bosly-scope-light {
	--bg: var(--wp--preset--color--white);
	--fg: var(--wp--preset--color--ink);
	--card: var(--wp--preset--color--white);
	--muted: var(--wp--preset--color--paper-muted);
	--muted-fg: var(--wp--preset--color--ink-muted);
	--border: rgba(0, 0, 0, 0.1);
	--input: rgba(0, 0, 0, 0.12);
	--primary: var(--wp--preset--color--ink);
	--primary-fg: var(--wp--preset--color--white);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accent-start); outline-offset: 3px; }

.skip-link {
	position: fixed; left: 1rem; top: -5rem; z-index: 100;
	border-radius: 999px; background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--ink);
	padding: 0.65rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.bosly-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.bosly-main { margin: 0; padding: 0; }
.bosly-main > * { max-width: none; }

/* Shared type utilities */
.eyebrow {
	font-family: var(--font-mono); font-size: 0.7rem; line-height: 1rem; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-fg);
}
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.text-muted { color: var(--muted-fg); }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Surfaces */
.grid-bg {
	background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 64px 64px;
}
.surface-card {
	background: linear-gradient(145deg, color-mix(in oklab, var(--card) 96%, var(--fg)), var(--card));
	box-shadow: inset 0 1px color-mix(in oklab, var(--fg) 6%, transparent);
}
.gradient-glow {
	position: absolute; width: 36rem; height: 36rem; border-radius: 999px; pointer-events: none;
	background: radial-gradient(circle, color-mix(in oklab, var(--accent-start) 14%, transparent), color-mix(in oklab, var(--accent-end) 5%, transparent) 35%, transparent 70%);
	filter: blur(28px);
}

/* Buttons (own markup) and core/button share one look */
.bosly-btn, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: 2.75rem; padding: 0.5rem 1.1rem; border: 1px solid transparent; border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; font-weight: 400; line-height: 1.25; text-decoration: none;
	white-space: nowrap; cursor: pointer;
	transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.bosly-btn--primary, .wp-block-button__link { background: var(--primary); color: var(--primary-fg); }
.bosly-btn--primary:hover, .wp-block-button__link:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.bosly-btn--outline { border-color: var(--input); background: color-mix(in oklab, var(--input) 30%, transparent); color: var(--fg); }
.bosly-btn--outline:hover { background: var(--muted); }
.bosly-btn--ghost { background: transparent; color: var(--fg); }
.bosly-btn--ghost:hover { background: var(--muted); }
.bosly-btn--lg { padding-inline: 2rem; }
.bosly-btn .bosly-icon { flex: none; }

.bosly-prose { padding-block: 4rem; }
.bosly-prose > * + *, .bosly-prose .wp-block-post-content > * + * { margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}