/**
 * Twister Wash design and color-scheme tokens.
 */

:root {
	--tw-bg: #ffffff;
	--tw-bg-soft: #f7f8f9;
	--tw-surface: #ffffff;
	--tw-surface-raised: #ffffff;
	--tw-surface-hover: #f0f2f3;
	--tw-text: #2f3237;
	--tw-text-muted: #6c7179;
	--tw-heading: #17181a;
	--tw-border: #dedfe2;
	--tw-border-strong: #b8bbc1;
	--tw-accent: #d71920;
	--tw-accent-hover: #a90f15;
	--tw-accent-text: #ffffff;
	--tw-link: #a90f15;
	--tw-link-hover: #d71920;
	--tw-shadow: 0 8px 28px rgb(20 22 25 / 8%);
	--tw-shadow-strong: 0 28px 70px rgb(12 14 18 / 18%);
	--tw-focus-ring: 0 0 0 3px rgb(18 101 204 / 28%);
	--tw-focus-color: #1265cc;

	/* Semantic foreground/background pairs for fixed light and dark sections. */
	--tw-text-primary: var(--tw-text);
	--tw-text-secondary: var(--tw-text-muted);
	--tw-text-on-dark: #f7f8f9;
	--tw-text-muted-on-dark: #cfd5d8;
	--tw-heading-on-dark: #ffffff;
	--tw-accent-on-dark: #ff777d;
	--tw-text-on-light: #2f3237;
	--tw-text-muted-on-light: #6c7179;
	--tw-heading-on-light: #17181a;
	--tw-background-primary: var(--tw-bg);
	--tw-background-secondary: var(--tw-bg-soft);

	--tw-header-bg: #17191d;
	--tw-header-surface: rgb(255 255 255 / 7%);
	--tw-header-text: #f7f7f8;
	--tw-header-muted: #b8bdc5;
	--tw-header-border: rgb(255 255 255 / 14%);
	--tw-header-hover: rgb(255 255 255 / 12%);
	--tw-header-shadow: 0 14px 38px rgb(0 0 0 / 22%);
	--tw-header-accent: var(--tw-accent);
	--tw-overlay: rgb(8 10 13 / 72%);

	--tw-footer-bg: #17181a;
	--tw-footer-text: #c9cbd0;
	--tw-footer-heading: #ffffff;
	--tw-footer-link: #d9dade;
	--tw-footer-border: rgb(255 255 255 / 12%);

	--tw-drawer-bg: #f4f5f6;
	--tw-drawer-surface: #ffffff;
	--tw-drawer-text: #17181a;
	--tw-drawer-muted: #6c7179;
	--tw-drawer-border: #dedfe2;
	--tw-drawer-hover: #ffffff;

	--tw-input-bg: #ffffff;
	--tw-input-text: #2f3237;
	--tw-input-border: #b8bbc1;
	--tw-input-placeholder: #777c84;
	--tw-input-focus: #1265cc;

	--tw-success: #237a46;
	--tw-warning: #9a6800;
	--tw-error: #b4232a;
	--tw-info: #1265cc;

	/* Palette values used only when the effective scheme is dark. */
	--tw-dark-bg: #15171a;
	--tw-dark-bg-soft: #1a1d21;
	--tw-dark-surface: #20242a;
	--tw-dark-surface-raised: #262b31;
	--tw-dark-surface-hover: #30363d;
	--tw-dark-text: #e4e7eb;
	--tw-dark-text-muted: #adb4bd;
	--tw-dark-heading: #f7f8f9;
	--tw-dark-border: #3a4048;
	--tw-dark-border-strong: #565e68;
	--tw-dark-link: #ff777d;
	--tw-dark-link-hover: #ff9a9f;
	--tw-dark-shadow: 0 12px 34px rgb(0 0 0 / 28%);
	--tw-dark-shadow-strong: 0 32px 80px rgb(0 0 0 / 48%);
	--tw-dark-input-bg: #20242a;
	--tw-dark-input-text: #f1f3f5;
	--tw-dark-input-placeholder: #929aa4;

	/* Backward-compatible aliases used by existing theme components. */
	--tw-color-white: #ffffff;
	--tw-color-graphite: var(--tw-heading);
	--tw-color-dark: #24262a;
	--tw-color-text: var(--tw-text);
	--tw-color-muted: var(--tw-text-muted);
	--tw-color-surface: var(--tw-bg-soft);
	--tw-color-border: var(--tw-border);
	--tw-color-red: var(--tw-accent);
	--tw-color-red-dark: var(--tw-accent-hover);
	--tw-color-success: var(--tw-success);
	--tw-color-focus: var(--tw-focus-color);
	--tw-shadow-sm: var(--tw-shadow);
	--tw-shadow-lg: var(--tw-shadow-strong);

	--tw-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tw-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--tw-container: 1280px;
	--tw-container-wide: 1440px;
	--tw-content: 820px;
	--tw-gutter: clamp(1rem, 3vw, 2rem);
	--tw-space-1: 0.25rem;
	--tw-space-2: 0.5rem;
	--tw-space-3: 0.75rem;
	--tw-space-4: 1rem;
	--tw-space-5: 1.5rem;
	--tw-space-6: 2rem;
	--tw-space-7: 3rem;
	--tw-space-8: 4.5rem;
	--tw-radius-sm: 0.5rem;
	--tw-radius-md: 0.875rem;
	--tw-radius-lg: 1.35rem;
	--tw-header-height: 88px;
	--tw-transition: 180ms ease;
}

html[data-tw-theme="light"] {
	color-scheme: light;
}

html[data-tw-theme="dark"] {
	--tw-bg: var(--tw-dark-bg);
	--tw-bg-soft: var(--tw-dark-bg-soft);
	--tw-surface: var(--tw-dark-surface);
	--tw-surface-raised: var(--tw-dark-surface-raised);
	--tw-surface-hover: var(--tw-dark-surface-hover);
	--tw-text: var(--tw-dark-text);
	--tw-text-muted: var(--tw-dark-text-muted);
	--tw-heading: var(--tw-dark-heading);
	--tw-border: var(--tw-dark-border);
	--tw-border-strong: var(--tw-dark-border-strong);
	--tw-link: var(--tw-dark-link);
	--tw-link-hover: var(--tw-dark-link-hover);
	--tw-shadow: var(--tw-dark-shadow);
	--tw-shadow-strong: var(--tw-dark-shadow-strong);
	--tw-drawer-bg: var(--tw-dark-bg-soft);
	--tw-drawer-surface: var(--tw-dark-surface-raised);
	--tw-drawer-text: var(--tw-dark-text);
	--tw-drawer-muted: var(--tw-dark-text-muted);
	--tw-drawer-border: var(--tw-dark-border);
	--tw-drawer-hover: var(--tw-dark-surface-hover);
	--tw-input-bg: var(--tw-dark-input-bg);
	--tw-input-text: var(--tw-dark-input-text);
	--tw-input-border: var(--tw-dark-border-strong);
	--tw-input-placeholder: var(--tw-dark-input-placeholder);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-tw-theme]) {
		--tw-bg: var(--tw-dark-bg);
		--tw-bg-soft: var(--tw-dark-bg-soft);
		--tw-surface: var(--tw-dark-surface);
		--tw-surface-raised: var(--tw-dark-surface-raised);
		--tw-surface-hover: var(--tw-dark-surface-hover);
		--tw-text: var(--tw-dark-text);
		--tw-text-muted: var(--tw-dark-text-muted);
		--tw-heading: var(--tw-dark-heading);
		--tw-border: var(--tw-dark-border);
		--tw-border-strong: var(--tw-dark-border-strong);
		--tw-link: var(--tw-dark-link);
		--tw-link-hover: var(--tw-dark-link-hover);
		--tw-shadow: var(--tw-dark-shadow);
		--tw-shadow-strong: var(--tw-dark-shadow-strong);
		--tw-drawer-bg: var(--tw-dark-bg-soft);
		--tw-drawer-surface: var(--tw-dark-surface-raised);
		--tw-drawer-text: var(--tw-dark-text);
		--tw-drawer-muted: var(--tw-dark-text-muted);
		--tw-drawer-border: var(--tw-dark-border);
		--tw-drawer-hover: var(--tw-dark-surface-hover);
		--tw-input-bg: var(--tw-dark-input-bg);
		--tw-input-text: var(--tw-dark-input-text);
		--tw-input-border: var(--tw-dark-border-strong);
		--tw-input-placeholder: var(--tw-dark-input-placeholder);
		color-scheme: dark;
	}
}