/* design tokens, the dark variant and utilities, without preflight or page
   styles: app.css builds the app on top of this, and the docs site imports it
   to render these components under starlight (docs/src/styles/global.css) */

@custom-variant dark {
	@media (prefers-color-scheme: dark) {
		&:where(:not([data-theme="light"], [data-theme="light"] *)) {
			@slot;
		}
	}
	&:where([data-theme="dark"], [data-theme="dark"] *) {
		@slot;
	}
}

/* the inverse of dark, for surfaces drawn dark-first (the landing page) */
@custom-variant light {
	@media (prefers-color-scheme: light) {
		&:where(:not([data-theme="dark"], [data-theme="dark"] *)) {
			@slot;
		}
	}
	&:where([data-theme="light"], [data-theme="light"] *) {
		@slot;
	}
}

@custom-variant mobile (@media (pointer: coarse) and (width < 48rem));

@theme {
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;

	--font-sans: "TimelessSans", "TimelessSans Fallback", ui-sans-serif, system-ui, sans-serif;
	--font-mono:
		"IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;

	--font-sans--font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;

	--font-weight-medium: 510;
	--font-weight-semibold: 590;

	--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);

	--ease-spring: linear(
		0,
		0.009,
		0.035 2.1%,
		0.141,
		0.281 6.7%,
		0.723 12.9%,
		0.938 16.7%,
		1.017,
		1.077,
		1.121,
		1.149 24.3%,
		1.159,
		1.163,
		1.161,
		1.154 29.9%,
		1.129 32.8%,
		1.051 39.6%,
		1.017 43.1%,
		0.991,
		0.977 51%,
		0.974 53.8%,
		0.975 57.1%,
		0.997 69.8%,
		1.003 76.9%,
		1.004 83.8%,
		1
	);

	--spacing-none: 0px;
	--spacing-3xs: 0.125rem;
	--spacing-2xs: 0.25rem;
	--spacing-xs: 0.5rem;
	--spacing-sm: 0.75rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.25rem;
	--spacing-xl: 1.5rem;
	--spacing-2xl: 2rem;
	--spacing-3xl: 2.5rem;
	--spacing-4xl: 3rem;
	--spacing-5xl: 4rem;

	--container-*: initial;
	--container-compact: 28rem;
	--container-narrow: 32rem;
	--container-medium: 42rem;
	--container-wide: 48rem;
	--container-page: 64rem;
	--container-hero: 80rem;

	--color-background-default: #ffffff;
	--color-background-subtle: #fafafa;
	--color-background-inset: #f2f2f2;
	--color-background-muted: #e5e5e5;
	--color-background-strong: #d4d4d4;
	--color-background-canvas: #f5f5f5;
	--color-background-highlight: #e0e7ff;
	--color-background-success-subtle: #dcfce7;
	--color-background-success-subtle-hover: #bbf7d0;
	--color-background-success-emphasis: #16a34a;
	--color-background-success-emphasis-hover: #15803d;
	--color-background-danger-subtle: #ffe4e6;
	--color-background-danger-subtle-hover: #fecdd3;
	--color-background-danger-emphasis: #fda4af;
	--color-background-danger-emphasis-hover: #fb7185;
	--color-background-warning-subtle: #fffbeb;
	--color-background-warning-subtle-hover: #fef3c7;
	--color-background-warning-emphasis: #f59e0b;
	--color-background-info-subtle: #eef2ff;
	--color-background-info-subtle-hover: #e0e7ff;
	--color-background-info-emphasis: #5750f1;
	--color-background-info-emphasis-hover: #4a41e0;
	--color-background-emphasis: #0a0a0a;

	/* --- background / navigation ---
	   The settings sidebar aliases *invert* between modes, so these cannot be
	   spelled as an existing pair: light recesses the frame (subtle) and raises
	   the active item (default), dark does the exact opposite. */
	--color-background-navigation-frame: #f5f5f5;
	--color-background-navigation-item: #ffffff;

	--color-foreground-default: #0a0a0a;
	--color-foreground-muted: #525252;
	--color-foreground-subtle: #737373;
	--color-foreground-placeholder: #a3a3a3;
	--color-foreground-disabled: #d4d4d4;
	--color-foreground-on-emphasis: #ffffff;
	--color-foreground-inverted: #f5f5f5;
	--color-foreground-highlight: #3730a3;
	--color-foreground-success: #16a34a;
	--color-foreground-success-strong: #166534;
	--color-foreground-success-disabled: #16a34a80;
	--color-foreground-danger: #e11d48;
	--color-foreground-danger-strong: #9f1239;
	--color-foreground-danger-subtle: #fb7185;
	--color-foreground-danger-disabled: #fda4af;
	--color-foreground-warning: #d97706;
	--color-foreground-warning-strong: #92400e;
	--color-foreground-warning-disabled: #fcd34d;
	--color-foreground-info: #4338ca;
	--color-foreground-info-strong: #3730a3;
	--color-foreground-link-default: #0a0a0a;
	--color-foreground-link-hover: #5750f1;
	--color-foreground-link-disabled: #a3a3a3;
	--color-foreground-link-danger: #e11d48;
	--color-foreground-link-danger-hover: #f43f5e;
	--color-foreground-link-success: #16a34a;
	--color-foreground-link-success-hover: #22c55e;
	--color-foreground-link-warning: #d97706;
	--color-foreground-link-warning-hover: #f59e0b;
	--color-foreground-link-info: #5750f1;
	--color-foreground-link-info-hover: #6d67f5;

	--color-border-default: #e5e5e5;
	--color-border-subtle: #f0f0f0;
	--color-border-strong: #d4d4d4;
	--color-border-disabled: #e5e5e5;
	--color-border-focus: #8b85f7;
	--color-border-focus-success: #22c55e;
	--color-border-focus-danger: #f43f5e;
	--color-border-success: #15803d;
	--color-border-warning: #fcd34d;
	--color-border-danger: #fda4af;
	--color-border-danger-subtle: #fecdd3;
	--color-border-navigation-item-active: #e5e5e5;

	--color-drawing-accent: #6d67f5;
	--color-drawing-accent-recess: color-mix(in srgb, var(--color-drawing-accent), black 14%);
	--color-drawing-accent-edge: color-mix(in srgb, var(--color-drawing-accent), black 38%);

	--color-shadow-inner-strong: #d4d4d4;
	--color-shadow-inner-strong-hover: #d4d4d4;
	--color-shadow-inner-subtle: #e5e5e5;
	--color-shadow-ambient-strong: rgb(0 0 0 / 0.08);
	--color-shadow-ambient-subtle: rgb(0 0 0 / 0.04);
	--color-shadow-ring: var(--color-alpha-dark-10);

	--color-inverse-background: #262626;
	--color-inverse-foreground: #f5f5f5;
	--color-inverse-border: #404040;
	--color-inverse-shadow-inner: #171717;

	--shadow-small: 0 1px 2px var(--color-shadow-ambient-strong);
	--shadow-regular:
		0 10px 28px -8px var(--color-shadow-ambient-strong),
		0 2px 6px var(--color-shadow-ambient-subtle);
	--shadow-large:
		0 24px 48px -12px var(--color-shadow-ambient-strong),
		0 6px 14px var(--color-shadow-ambient-subtle);

	--color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent);
	--color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent);
	--color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent);
	--color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent);
	--color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent);
	--color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent);
	--color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent);
	--color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent);
	--color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent);
	--color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent);
	--color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent);
	--color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent);
	--color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent);
	--color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent);
	--color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent);
	--color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent);
	--color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent);
	--color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent);
	--color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);

	--color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent);
	--color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent);
	--color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent);
	--color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent);
	--color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent);
	--color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent);
	--color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent);
	--color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent);
	--color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent);
	--color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent);
	--color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent);
	--color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent);
	--color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent);
	--color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent);
	--color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent);
	--color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent);
	--color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
	--color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
	--color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);

	/* --- terminal (pipeline logs) --- catppuccin latte, same values the
	   appview's terminal-to-html palette uses. dark is macchiato, below. */
	--color-ansi-black: #6c6f85;
	--color-ansi-red: #d20f39;
	--color-ansi-green: #40a02b;
	--color-ansi-yellow: #df8e1d;
	--color-ansi-blue: #1e66f5;
	--color-ansi-magenta: #8839ef;
	--color-ansi-cyan: #179299;
	--color-ansi-white: #4c4f69;
	--color-ansi-bright-black: #8c8fa1;
	--color-ansi-bright-red: #e64553;
	--color-ansi-bright-green: #40a02b;
	--color-ansi-bright-yellow: #e5c890;
	--color-ansi-bright-blue: #209fb5;
	--color-ansi-bright-magenta: #ea76cb;
	--color-ansi-bright-cyan: #04a5e5;
	--color-ansi-bright-white: #bcc0cc;

	--color-syntax-foreground: #4c4f69;
	--color-syntax-comment: #7c7f93;
	--color-syntax-string: #40a02b;
	--color-syntax-keyword: #8839ef;
	--color-syntax-function: #1e66f5;
	--color-syntax-constant: #fe640b;
	--color-syntax-parameter: #e64553;
	--color-syntax-punctuation: #7c7f93;
	--color-syntax-link: #1e66f5;
	--color-syntax-inserted: #40a02b;
	--color-syntax-deleted: #d20f39;
	--color-syntax-changed: #df8e1d;

	--animate-spin-step: spin-step 2.5s infinite;
	--animate-stack-pop: stack-pop 620ms var(--ease-spring) both;
	--animate-stack-shift: stack-shift 520ms var(--ease-spring) both;
	--animate-marquee-up: marquee-up 40s linear infinite;
	--animate-marquee-down: marquee-down 40s linear infinite;
	--animate-marquee-left: marquee-left 40s linear infinite;

	@keyframes stack-pop {
		from {
			opacity: 0;
			transform: translateY(-0.75rem) scale(0.85);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes stack-shift {
		from {
			transform: translateY(-2.5rem);
		}
		to {
			transform: none;
		}
	}

	@keyframes marquee-up {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(-50%);
		}
	}

	@keyframes marquee-left {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-50%);
		}
	}

	@keyframes marquee-down {
		from {
			transform: translateY(-50%);
		}
		to {
			transform: translateY(0);
		}
	}

	@keyframes spin-step {
		0% {
			transform: rotate(0deg);
			animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}
		50% {
			transform: rotate(180deg);
			animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}
		100% {
			transform: rotate(360deg);
		}
	}
}

@utility hit-area-y-* {
	&::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block: calc(var(--spacing) * --value(number) * -1);
	}
}

@utility typography-heading-0 {
	font-size: 5rem;
	line-height: 5rem;
	font-weight: 600;
	letter-spacing: -0.25px;
}

@utility typography-heading-1 {
	font-size: 3rem;
	line-height: 3.5rem;
	font-weight: 500;
}

@utility typography-heading-2 {
	font-size: 1.875rem;
	line-height: 1.875rem;
	font-weight: 600;
}

@utility typography-heading-3 {
	font-size: 1.5rem;
	line-height: 1.875rem;
	font-weight: 500;
}

@utility typography-heading-4 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 500;
}

@utility typography-paragraph-large {
	font-size: 1rem;
	line-height: 1.5rem;
}

@utility typography-paragraph-body {
	font-size: 0.9375rem;
	line-height: 1.5rem;
}

@utility typography-paragraph-regular {
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

@utility typography-paragraph-small {
	font-size: 0.75rem;
	line-height: 1rem;
}

@utility typography-paragraph-mini {
	font-size: 0.625rem;
	line-height: 1rem;
}

@utility typography-monospace-large {
	@apply font-mono;
	font-size: 1rem;
	line-height: 1.5rem;
}

@utility typography-monospace-regular {
	@apply font-mono;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

@utility typography-monospace-small {
	@apply font-mono;
	font-size: 0.75rem;
	line-height: 1rem;
}

@utility popover-transition {
	opacity: 0;
	scale: 0.95;
	transform-origin: center;

	&[data-popover-origin="top-left"] {
		transform-origin: top left;
	}
	&[data-popover-origin="top-center"] {
		transform-origin: top center;
	}
	&[data-popover-origin="top-right"] {
		transform-origin: top right;
	}
	&[data-popover-origin="center-left"] {
		transform-origin: center left;
	}
	&[data-popover-origin="center-center"] {
		transform-origin: center;
	}
	&[data-popover-origin="center-right"] {
		transform-origin: center right;
	}
	&[data-popover-origin="bottom-left"] {
		transform-origin: bottom left;
	}
	&[data-popover-origin="bottom-center"] {
		transform-origin: bottom center;
	}
	&[data-popover-origin="bottom-right"] {
		transform-origin: bottom right;
	}

	transition:
		opacity 120ms ease-out,
		scale 120ms ease-out,
		overlay 120ms allow-discrete,
		display 120ms allow-discrete;

	&:is(:popover-open, :modal) {
		opacity: 1;
		scale: 1;
	}

	@starting-style {
		&:is(:popover-open, :modal) {
			opacity: 0;
			scale: 0.95;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}

@utility edge-ring {
	@apply ring ring-shadow-ring;
	@variant forced-colors {
		outline: 1px solid;
	}
}

@utility edge-ring-inset {
	@apply inset-ring inset-ring-shadow-ring;
	@variant forced-colors {
		outline: 1px solid;
		outline-offset: -1px;
	}
}

@utility defer-render-* {
	content-visibility: auto;
	contain-intrinsic-height: auto --spacing(--value(number));
}

@utility hit-area {
	position: relative;

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-* {
	position: relative;
	--hit-area-t: --spacing(--value(number) * -1);
	--hit-area-t: calc(--value([*]) * -1);
	--hit-area-b: --spacing(--value(number) * -1);
	--hit-area-b: calc(--value([*]) * -1);
	--hit-area-l: --spacing(--value(number) * -1);
	--hit-area-l: calc(--value([*]) * -1);
	--hit-area-r: --spacing(--value(number) * -1);
	--hit-area-r: calc(--value([*]) * -1);

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-l-* {
	position: relative;
	--hit-area-l: --spacing(--value(number) * -1);
	--hit-area-l: calc(--value([*]) * -1);

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-r-* {
	position: relative;
	--hit-area-r: --spacing(--value(number) * -1);
	--hit-area-r: calc(--value([*]) * -1);

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-t-* {
	position: relative;
	--hit-area-t: --spacing(--value(number) * -1);
	--hit-area-t: calc(--value([*]) * -1);

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-b-* {
	position: relative;
	--hit-area-b: --spacing(--value(number) * -1);
	--hit-area-b: calc(--value([*]) * -1);

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-x-* {
	position: relative;
	--hit-area-l: --spacing(--value(number) * -1);
	--hit-area-l: calc(--value([*]) * -1);
	--hit-area-r: --spacing(--value(number) * -1);
	--hit-area-r: calc(--value([*]) * -1);

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-y-* {
	position: relative;
	--hit-area-t: --spacing(--value(number) * -1);
	--hit-area-t: calc(--value([*]) * -1);
	--hit-area-b: --spacing(--value(number) * -1);
	--hit-area-b: calc(--value([*]) * -1);

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
	}
}

@utility hit-area-debug {
	position: relative;

	&::before {
		content: "";
		position: absolute;
		top: var(--hit-area-t, 0px);
		right: var(--hit-area-r, 0px);
		bottom: var(--hit-area-b, 0px);
		left: var(--hit-area-l, 0px);
		pointer-events: inherit;
		@apply border border-dashed border-blue-500;
		@apply bg-blue-500/10;
	}

	&:hover::before {
		@apply border border-dashed border-green-500;
		@apply bg-green-500/10;
	}
}

/* debug only. */
@utility debug-border {
	--debug-hue: 0;
	--debug-depth: 0;
	--debug-width: 1px;
	outline: var(--debug-width) solid hsl(calc(var(--debug-hue) + var(--debug-depth)) 100% 50%);
	/* an outline is drawn outward from the outline edge, so the offset has to cancel the
	   whole width — otherwise a thick one bleeds past the box it is marking */
	outline-offset: calc(-1 * var(--debug-width));

	&:nth-child(6n + 2) {
		--debug-hue: 60;
	}
	&:nth-child(6n + 3) {
		--debug-hue: 120;
	}
	&:nth-child(6n + 4) {
		--debug-hue: 180;
	}
	&:nth-child(6n + 5) {
		--debug-hue: 240;
	}
	&:nth-child(6n) {
		--debug-hue: 300;
	}
}

@layer utilities {
	.debug-border .debug-border {
		--debug-depth: 25;
		--debug-width: 2px;
	}
	.debug-border .debug-border .debug-border {
		--debug-depth: 50;
		--debug-width: 3px;
	}
	.debug-border .debug-border .debug-border .debug-border {
		--debug-depth: 75;
		--debug-width: 4px;
	}
}

@utility swap-layer {
	grid-area: 1 / 1;
	transition-property: opacity, scale, translate, filter;
	transition-duration: var(--swap-duration);
	transition-timing-function: var(--swap-easing);
}

@utility swap-icon-out {
	opacity: 0;
	scale: 0.25;
	filter: blur(4px);

	@media (prefers-reduced-motion: reduce) {
		scale: 1;
		filter: none;
	}
}

@utility swap-label-out {
	opacity: 0;
	translate: 0 3px;
	filter: blur(3px);

	@media (prefers-reduced-motion: reduce) {
		translate: none;
		filter: none;
	}
}

@utility text-swap {
	display: inline-block;
	transform: translateY(0);
	filter: blur(0);
	opacity: 1;
	will-change: transform, filter, opacity;
	transition:
		transform var(--text-swap-dur) var(--text-swap-ease),
		filter var(--text-swap-dur) var(--text-swap-ease),
		opacity var(--text-swap-dur) var(--text-swap-ease);

	&[data-swap="exit"] {
		transform: translateY(calc(var(--text-swap-translate-y) * -1));
		filter: blur(var(--text-swap-blur));
		opacity: 0;
	}

	&[data-swap="enter"] {
		transform: translateY(var(--text-swap-translate-y));
		filter: blur(var(--text-swap-blur));
		opacity: 0;
		transition: none;
	}

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}

@utility bone-pulse {
	/* fade-in has to be second so it overrides pulse during its 120ms */
	animation:
		var(--animate-pulse),
		bone-fade-in 120ms ease-out;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

@keyframes bone-fade-in {
	from {
		opacity: 0;
	}
}

@utility row-breathe {
	animation: row-breathe 1.2s ease-in-out infinite;
	background-color: var(--color-background-muted);
	border-radius: var(--radius-md, 0.5rem);

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

@keyframes row-breathe {
	0%,
	100% {
		opacity: 0.88;
	}
	50% {
		opacity: 1;
	}
}

@layer base {
	:root {
		--text-swap-dur: 150ms;
		--text-swap-translate-y: 4px;
		--text-swap-blur: 2px;
		--text-swap-ease: ease-in-out;
	}
}

/* unlayered, so the dark values beat the light @theme values wherever those
   land: the theme layer in the app, unlayered in the docs */
:root {
	@variant dark {
		--color-background-default: #141414;
		--color-background-subtle: #1a1a1a;
		--color-background-inset: #1f1f1f;
		--color-background-muted: #2a2a2a;
		--color-background-strong: #474747;
		--color-background-canvas: #0a0a0a;
		--color-background-highlight: #2c2675;
		--color-background-success-subtle: #14532d;
		--color-background-success-subtle-hover: #166534;
		--color-background-success-emphasis: #15803d;
		--color-background-success-emphasis-hover: #166534;
		--color-background-danger-subtle: #4c0519;
		--color-background-danger-subtle-hover: #881337;
		--color-background-danger-emphasis: #be123c;
		--color-background-danger-emphasis-hover: #9f1239;
		--color-background-warning-subtle: #451a03;
		--color-background-warning-subtle-hover: #78350f;
		--color-background-warning-emphasis: #d97706;
		--color-background-info-subtle: #1c1a45;
		--color-background-info-subtle-hover: #27235f;
		--color-background-info-emphasis: #6d67f5;
		--color-background-info-emphasis-hover: #837ef8;
		--color-background-emphasis: #f5f5f5;

		/* --- background / navigation (Dark) --- inverted vs light, see above */
		--color-background-navigation-frame: #141414;
		--color-background-navigation-item: #1f1f1f;

		--color-foreground-default: #ededed;
		--color-foreground-muted: #a3a3a3;
		--color-foreground-subtle: #737373;
		--color-foreground-placeholder: #737373;
		--color-foreground-disabled: #474747;
		--color-foreground-on-emphasis: #ffffff;
		--color-foreground-inverted: #0a0a0a;
		--color-foreground-highlight: #c7cffe;
		--color-foreground-success: #4ade80;
		--color-foreground-success-strong: #bbf7d0;
		--color-foreground-success-disabled: #15803d;
		--color-foreground-danger: #fb7185;
		--color-foreground-danger-strong: #fecdd3;
		--color-foreground-danger-disabled: #9f1239;
		--color-foreground-warning: #fbbf24;
		--color-foreground-warning-strong: #fde68a;
		--color-foreground-warning-disabled: #b45309;
		--color-foreground-info: #a5acfb;
		--color-foreground-info-strong: #c7cffe;
		--color-foreground-link-default: #ededed;
		--color-foreground-link-hover: #a5acfb;
		--color-foreground-link-disabled: #737373;
		--color-foreground-link-danger: #fb7185;
		--color-foreground-link-danger-hover: #fda4af;
		--color-foreground-link-success: #22c55e;
		--color-foreground-link-success-hover: #4ade80;
		--color-foreground-link-warning: #f59e0b;
		--color-foreground-link-warning-hover: #fbbf24;
		--color-foreground-link-info: #8b85f7;
		--color-foreground-link-info-hover: #a5acfb;

		--color-border-default: #262626;
		--color-border-subtle: #1c1c1c;
		--color-border-strong: #404040;
		--color-border-disabled: #2a2a2a;
		--color-border-focus: #8b85f7;
		--color-border-focus-success: #22c55e;
		--color-border-focus-danger: #f43f5e;
		--color-border-success: #15803d;
		--color-border-warning: #92400e;
		--color-border-danger: #9f1239;
		--color-border-navigation-item-active: #2a2a2a;

		--color-shadow-inner-strong: #000000;
		--color-shadow-inner-strong-hover: #141414;
		--color-shadow-inner-subtle: #0a0a0a;
		--color-shadow-ambient-strong: rgb(0 0 0 / 0.35);
		--color-shadow-ambient-subtle: rgb(0 0 0 / 0.2);

		--color-inverse-background: #ffffff;
		--color-inverse-foreground: #171717;
		--color-inverse-border: #e5e5e5;
		--color-inverse-shadow-inner: #e5e5e5;

		/* --- terminal (Dark) --- catppuccin macchiato */
		--color-ansi-black: #a5adcb;
		--color-ansi-red: #ed8796;
		--color-ansi-green: #a6da95;
		--color-ansi-yellow: #eed49f;
		--color-ansi-blue: #8aadf4;
		--color-ansi-magenta: #c6a0f6;
		--color-ansi-cyan: #8bd5ca;
		--color-ansi-white: #cad3f5;
		--color-ansi-bright-black: #8087a2;
		--color-ansi-bright-red: #f5bde6;
		--color-ansi-bright-green: #a6da95;
		--color-ansi-bright-yellow: #f5a97f;
		--color-ansi-bright-blue: #7dc4e4;
		--color-ansi-bright-magenta: #f4dbd6;
		--color-ansi-bright-cyan: #91d7e3;
		--color-ansi-bright-white: #f0c6c6;

		--color-syntax-foreground: #cdd6f4;
		--color-syntax-comment: #9399b2;
		--color-syntax-string: #a6e3a1;
		--color-syntax-keyword: #cba6f7;
		--color-syntax-function: #89b4fa;
		--color-syntax-constant: #fab387;
		--color-syntax-parameter: #eba0ac;
		--color-syntax-punctuation: #9399b2;
		--color-syntax-link: #89b4fa;
		--color-syntax-inserted: #a6e3a1;
		--color-syntax-deleted: #f38ba8;
		--color-syntax-changed: #f9e2af;
	}
}