/* Functional UI core — shared Open Props primitives + semantic theme tokens.
   Load once before component CSS. No reset/normalize is included. */
@import "./vendor/open-props/open-props.fui.css";

:root,
[data-fui-theme="light"] {
	color-scheme: light;
	--fui-surface: var(--gray-0);
	--fui-surface-subtle: var(--gray-1);
	--fui-surface-muted: var(--fui-surface-subtle);
	--fui-surface-raised: var(--gray-0);
	--fui-surface-hover: var(--gray-2);
	--fui-text: var(--gray-9);
	--fui-text-muted: var(--gray-7);
	--fui-border: var(--gray-3);
	--fui-border-strong: var(--gray-5);
	--fui-accent: var(--indigo-7);
	--fui-on-accent: var(--gray-0);
	--fui-accent-hover: var(--indigo-8);
	--fui-accent-soft: var(--indigo-0);
	--fui-danger: var(--red-9);
	--fui-on-danger: var(--gray-0);
	--fui-danger-hover: var(--red-10);
	--fui-danger-soft: var(--red-0);
	--fui-success: var(--green-9);
	--fui-success-soft: var(--green-0);
	--fui-warning: var(--yellow-9);
	--fui-warning-soft: var(--yellow-0);
	--fui-info: var(--blue-8);
	--fui-info-soft: var(--blue-0);
	--fui-backdrop: color-mix(in srgb, var(--gray-12) 45%, transparent);
	--shadow-color: 220 3% 15%;
	--shadow-strength: 1%;
}

[data-fui-theme="dark"] {
	color-scheme: dark;
	--fui-surface: var(--gray-10);
	--fui-surface-subtle: var(--gray-11);
	--fui-surface-muted: var(--fui-surface-subtle);
	--fui-surface-raised: var(--gray-9);
	--fui-surface-hover: var(--gray-8);
	--fui-text: var(--gray-0);
	--fui-text-muted: var(--gray-5);
	--fui-border: var(--gray-8);
	--fui-border-strong: var(--gray-7);
	--fui-accent: var(--indigo-4);
	--fui-on-accent: var(--gray-12);
	--fui-accent-hover: var(--indigo-3);
	--fui-accent-soft: color-mix(in srgb, var(--indigo-4) 18%, transparent);
	--fui-danger: var(--red-4);
	--fui-on-danger: var(--gray-12);
	--fui-danger-hover: var(--red-5);
	--fui-danger-soft: color-mix(in srgb, var(--red-7) 20%, transparent);
	--fui-success: var(--green-4);
	--fui-success-soft: color-mix(in srgb, var(--green-7) 20%, transparent);
	--fui-warning: var(--yellow-4);
	--fui-warning-soft: color-mix(in srgb, var(--yellow-7) 20%, transparent);
	--fui-info: var(--blue-3);
	--fui-info-soft: color-mix(in srgb, var(--blue-7) 20%, transparent);
	--fui-backdrop: color-mix(in srgb, var(--gray-12) 62%, transparent);
	--shadow-color: 220 40% 2%;
	--shadow-strength: 25%;
}

:root,
[data-fui-theme] {
	--fui-radius-sm: var(--radius-2);
	--fui-radius-small: var(--fui-radius-sm);
	--fui-radius: var(--radius-3);
	--fui-radius-lg: var(--radius-4);
	--fui-spacing: var(--size-3);
	--fui-control-height: var(--size-px-8);
	--fui-shadow: var(--shadow-2);
	--fui-focus-color: color-mix(in srgb, var(--fui-accent) 28%, transparent);
	--fui-focus: 0 0 0 var(--size-px-1) var(--fui-focus-color);
	--fui-focus-ring: var(--fui-focus);
	--fui-font-sm: calc(var(--font-size-0) + var(--border-size-2));
	--fui-opacity-hidden: 0;
	--fui-opacity-subtle: 0.45;
	--fui-opacity-muted: 0.5;
	--fui-opacity-disabled: 0.55;
	--fui-opacity-secondary: 0.65;
	--fui-opacity-emphasis: 0.9;
	--fui-bg: var(--fui-surface);
	--fui-bg-muted: var(--fui-surface-subtle);
	--fui-space-1: var(--size-1);
	--fui-space-2: var(--size-2);
	--fui-space-3: var(--size-3);
	--fui-space-4: var(--size-4);
	--fui-motion-fast: var(--duration-quick-2);
	--fui-motion-normal: var(--duration-moderate-1);
	--fui-motion-slow: var(--duration-moderate-2);
	--fui-motion-spin: calc(
		var(--duration-gentle-2) +
		var(--duration-moderate-2)
	);
	--fui-motion-shimmer: calc(
		var(--duration-gentle-2) +
		var(--duration-gentle-2) +
		var(--duration-gentle-1)
	);
	--fui-ease: var(--ease-3);
}