@layer reset, base, recipes, utilities;

@import '@luke-ui/react/stylesheet.css';
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

code > * {
	tab-size: 2;
}

/**
 * Bridge Fumadocs structural colour variables to Luke UI stable tokens while
 * the article and TOC still use Fumadocs UI. Status and diff variables remain
 * Fumadocs-owned.
 */
.luke-ui-theme {
	--color-fd-background: var(--luke-color-surface-canvas);
	--color-fd-foreground: var(--luke-color-text-primary);
	--color-fd-muted: var(--luke-color-surface-recessed);
	--color-fd-muted-foreground: var(--luke-color-text-secondary);
	--color-fd-popover: var(--luke-color-surface-floating);
	--color-fd-popover-foreground: var(--luke-color-text-primary);
	--color-fd-card: var(--luke-color-surface-canvas);
	--color-fd-card-foreground: var(--luke-color-text-primary);
	--color-fd-border: var(--luke-color-border-decorative);
	--color-fd-primary: var(--luke-color-background-accent-solid-rest);
	--color-fd-primary-foreground: var(--luke-color-foreground-accent-on-solid);
	--color-fd-secondary: var(--luke-color-surface-recessed);
	--color-fd-secondary-foreground: var(--luke-color-text-primary);
	--color-fd-accent: var(--luke-color-background-neutral-subtle-hover);
	--color-fd-accent-foreground: var(--luke-color-text-primary);
	--color-fd-ring: var(--luke-color-border-focus);
	--color-fd-overlay: var(--luke-color-overlay-backdrop);
}

/* Keep Fumadocs' 28px DocsTitle with Luke UI's matching 36px line height */
.luke-ui-theme #docs-shell article h1:first-of-type {
	line-height: 36px;
}

/*
 * Contain in-flow stacking (example resize grips, code copy controls) so
 * descendants cannot paint over the sticky header. Isolation rather than a
 * higher header z-index.
 */
.luke-ui-theme #docs-shell article {
	isolation: isolate;
}