/*
 * svelte-docsmith theme — the whole CSS contract in one import.
 *
 * In your Tailwind v4 entry stylesheet:
 *
 *   @import 'tailwindcss';
 *   @import 'svelte-docsmith/theme.css';
 *
 * This file makes Tailwind scan the package itself (so the utility classes
 * its components use are generated), registers the shadcn design tokens the
 * components read, and applies the small base layer the docs chrome expects.
 * Override any token by redefining it after the import.
 */

@plugin '@tailwindcss/typography';
@import 'tw-animate-css';
@import 'tailwindcss';
@import '@fontsource-variable/inter';
@import '@fontsource-variable/source-serif-4';
@import '@fontsource/jetbrains-mono';

/* Generate utilities for the classes used inside this package. */
@source './';

/* Class-based dark mode: `dark:` applies under a `.dark` ancestor. */
@custom-variant dark (&:where(.dark, .dark *));

/* Map Tailwind theme tokens onto the runtime CSS variables below, so utilities
 * like `bg-background` follow light/dark at runtime. */
@theme inline {
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);

	--radius-xl: calc(var(--radius) + 4px);
	--radius-lg: var(--radius);
	--radius-md: calc(var(--radius) - 2px);
	--radius-sm: calc(var(--radius) - 4px);

	/* Wire the font/shadow tokens into Tailwind, so `font-sans`, `shadow-sm`,
	 * etc. (and the base body font) use them and a theme can override them. */
	--font-sans: var(--font-sans);
	--font-serif: var(--font-serif);
	--font-mono: var(--font-mono);

	--shadow-2xs: var(--shadow-2xs);
	--shadow-xs: var(--shadow-xs);
	--shadow-sm: var(--shadow-sm);
	--shadow: var(--shadow);
	--shadow-md: var(--shadow-md);
	--shadow-lg: var(--shadow-lg);
	--shadow-xl: var(--shadow-xl);
	--shadow-2xl: var(--shadow-2xl);
}

/* A slim, rounded, theme-aware scrollbar — sits inset on transparent track so
 * it reads as part of the surface, not a browser chrome. Used by scrolling
 * overlays (the search palette, popovers) where the native bar looks heavy. */
@utility scrollbar-slim {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in oklab, var(--border) 85%, transparent) transparent;

	&::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	&::-webkit-scrollbar-track {
		background: transparent;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 9999px;
		border: 3px solid transparent;
		background-clip: padding-box;
		background-color: color-mix(in oklab, var(--border) 85%, transparent);
	}
	&::-webkit-scrollbar-thumb:hover {
		background-color: var(--muted-foreground);
	}
}

@layer base {
	:root {
		--background: oklch(1 0 0);
		--foreground: oklch(0.2101 0.0318 264.6645);
		--card: oklch(1 0 0);
		--card-foreground: oklch(0.2101 0.0318 264.6645);
		--popover: oklch(1 0 0);
		--popover-foreground: oklch(0.2101 0.0318 264.6645);
		--primary: oklch(0.6716 0.1368 48.513);
		--primary-foreground: oklch(1 0 0);
		--secondary: oklch(0.536 0.0398 196.028);
		--secondary-foreground: oklch(1 0 0);
		--muted: oklch(0.967 0.0029 264.5419);
		--muted-foreground: oklch(0.551 0.0234 264.3637);
		--accent: oklch(0.9491 0 0);
		--accent-foreground: oklch(0.2101 0.0318 264.6645);
		--destructive: oklch(0.6368 0.2078 25.3313);
		--destructive-foreground: oklch(0.9851 0 0);
		--border: oklch(0.9276 0.0058 264.5313);
		--input: oklch(0.9276 0.0058 264.5313);
		--ring: oklch(0.6716 0.1368 48.513);
		--chart-1: oklch(0.594 0.0443 196.0233);
		--chart-2: oklch(0.7214 0.1337 49.9802);
		--chart-3: oklch(0.8721 0.0864 68.5474);
		--chart-4: oklch(0.6268 0 0);
		--chart-5: oklch(0.683 0 0);
		--sidebar: oklch(0.967 0.0029 264.5419);
		--sidebar-foreground: oklch(0.2101 0.0318 264.6645);
		--sidebar-primary: oklch(0.6716 0.1368 48.513);
		--sidebar-primary-foreground: oklch(1 0 0);
		--sidebar-accent: oklch(1 0 0);
		--sidebar-accent-foreground: oklch(0.2101 0.0318 264.6645);
		--sidebar-border: oklch(0.9276 0.0058 264.5313);
		--sidebar-ring: oklch(0.6716 0.1368 48.513);
		/* Fontsource variable packages register as "… Variable"; keep the
		 * static family names as fallbacks for consumers who load Google Fonts
		 * or system stacks instead. */
		--font-sans: 'Inter Variable', Inter, sans-serif;
		--font-serif: 'Source Serif 4 Variable', 'Source Serif 4', serif;
		--font-mono: 'JetBrains Mono', ui-monospace, monospace;
		--radius: 0.75rem;
		--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
		--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
		--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
		--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
		--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px hsl(0 0% 0% / 0.1);
		--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px hsl(0 0% 0% / 0.1);
		--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px hsl(0 0% 0% / 0.1);
		--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
		/* Shadow primitives + scale controls (tweakcn parity; the shadow scale
		 * above is authored directly, these are here for regeneration/overrides).
		 * .dark inherits all of these — only colors flip. */
		--shadow-color: hsl(0 0% 0%);
		--shadow-opacity: 0.1;
		--shadow-blur: 3px;
		--shadow-spread: 0px;
		--shadow-offset-x: 0px;
		--shadow-offset-y: 1px;
		--tracking-normal: 0em;
		--spacing: 0.25rem;
	}

	.dark {
		--background: oklch(0.1797 0.0043 308.1928);
		--foreground: oklch(0.8109 0 0);
		--card: oklch(0.1822 0 0);
		--card-foreground: oklch(0.8109 0 0);
		--popover: oklch(0.1797 0.0043 308.1928);
		--popover-foreground: oklch(0.8109 0 0);
		--primary: oklch(0.7214 0.1337 49.9802);
		--primary-foreground: oklch(0.1797 0.0043 308.1928);
		--secondary: oklch(0.594 0.0443 196.0233);
		--secondary-foreground: oklch(0.1797 0.0043 308.1928);
		--muted: oklch(0.252 0 0);
		--muted-foreground: oklch(0.6268 0 0);
		--accent: oklch(0.3211 0 0);
		--accent-foreground: oklch(0.8109 0 0);
		--destructive: oklch(0.7106 0.1661 22.2162);
		--destructive-foreground: oklch(0.1797 0.0043 308.1928);
		--border: oklch(0.252 0 0);
		--input: oklch(0.252 0 0);
		--ring: oklch(0.7214 0.1337 49.9802);
		--chart-1: oklch(0.594 0.0443 196.0233);
		--chart-2: oklch(0.7214 0.1337 49.9802);
		--chart-3: oklch(0.8721 0.0864 68.5474);
		--chart-4: oklch(0.6268 0 0);
		--chart-5: oklch(0.683 0 0);
		--sidebar: oklch(0.1822 0 0);
		--sidebar-foreground: oklch(0.8109 0 0);
		--sidebar-primary: oklch(0.7214 0.1337 49.9802);
		--sidebar-primary-foreground: oklch(0.1797 0.0043 308.1928);
		--sidebar-accent: oklch(0.3211 0 0);
		--sidebar-accent-foreground: oklch(0.8109 0 0);
		--sidebar-border: oklch(0.252 0 0);
		--sidebar-ring: oklch(0.7214 0.1337 49.9802);
	}

	* {
		@apply border-border;
		/* Anchored headings land below the sticky header. */
		@apply scroll-mt-20;
	}

	body {
		@apply bg-background text-foreground;
	}
}

/*
 * Reduced motion. When a reader asks the OS to minimise motion, neutralise the
 * framework's movement in one place: the overlay slide/scale (dialog, sheet,
 * popover, dropdown) and accordion height animations come from tw-animate-css,
 * which ships no guard of its own, and those overlays portal to <body> — outside
 * any shell wrapper — so the rule has to be global to reach them. Durations
 * collapse to ~0 rather than `none` so the animation/transition *end* events
 * bits-ui relies on to mount and unmount still fire. Opacity-only fades are the
 * accessible alternative to motion and are intentionally left to play.
 */
@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;
	}
}

/*
 * Shiki dual-theme output: light colors are inline, dark colors ship as
 * --shiki-dark/--shiki-dark-bg variables. Flip to them under `.dark`.
 * Code fences strip Shiki's <pre> (their bg-muted wrapper shows through);
 * LiveExample keeps Shiki's <pre>, so the background flip darkens it.
 */
html.dark .shiki,
html.dark .shiki span {
	color: var(--shiki-dark) !important;
}

html.dark .shiki {
	background-color: var(--shiki-dark-bg, transparent) !important;
}

/*
 * Mermaid loading skeleton. Global (not scoped) because it is rendered both by
 * the server-side placeholder the preprocessor emits and by the client
 * component before the diagram is ready — sharing one rule keeps their height
 * identical, so the space is reserved from first paint and the diagram no longer
 * shifts the page in as it loads.
 */
.docsmith-mermaid-skeleton {
	margin: 1.5rem 0;
	min-height: 8rem;
	border-radius: var(--radius, 0.75rem);
	border: 1px solid var(--border);
	background: color-mix(in oklch, var(--muted) 45%, transparent);
	animation: docsmith-mermaid-pulse 1.6s ease-in-out infinite;
}

@keyframes docsmith-mermaid-pulse {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.docsmith-mermaid-skeleton {
		animation: none;
	}
}