:root {
	color-scheme: light;

	--kwt-color-background: #f7f8fb;
	--kwt-color-foreground: #171923;
	--kwt-color-primary: #275fd6;
	--kwt-color-accent: #0f9f8f;
	--kwt-color-muted: #667085;
	--kwt-color-card: #ffffff;
	--kwt-color-border: rgba(102, 112, 133, 0.18);
	--kwt-color-selection: rgba(15, 159, 143, 0.28);

	--kwt-radius-xs: 0.375rem;
	--kwt-radius-sm: 0.5rem;
	--kwt-radius-md: 0.875rem;
	--kwt-radius-lg: 1.375rem;
	--kwt-radius-xl: 1.75rem;
	--kwt-radius-2xl: 2.25rem;
	--kwt-radius-pill: 999px;

	--kwt-shadow-subtle: 0 1px 2px rgba(16, 24, 40, 0.05);
	--kwt-shadow-card: 0 18px 48px rgba(16, 24, 40, 0.08);
	--kwt-shadow-hover: 0 24px 70px rgba(16, 24, 40, 0.13);
	--kwt-shadow-focus: 0 0 0 4px rgba(39, 95, 214, 0.2);

	--kwt-transition-fast: 150ms ease;
	--kwt-transition-normal: 240ms ease;
	--kwt-transition-slow: 360ms ease;

	--kwt-backdrop-background: rgba(255, 255, 255, 0.76);
	--kwt-backdrop-border: rgba(102, 112, 133, 0.18);
	--kwt-backdrop-blur: 14px;

	--kwt-text-max-width: 68ch;
	--kwt-content-width: 52rem;
	--kwt-reading-width: 56rem;
	--kwt-page-width: 56.25rem;
	--kwt-wide-width: 76rem;
	--kwt-hero-min-height: 34rem;
	--kwt-hero-min-height-page: 26rem;
	--kwt-hero-compact-height: 24rem;
	--kwt-hero-overlay: linear-gradient(180deg, rgba(8, 13, 26, 0.1) 0%, rgba(8, 13, 26, 0.58) 58%, rgba(8, 13, 26, 0.78) 100%);
	--kwt-hero-content-width: 54rem;
	--kwt-breadcrumb-size: 0.8125rem;

	--kwt-z-base: 1;
	--kwt-z-header: 20;
	--kwt-z-dropdown: 40;
	--kwt-z-modal: 80;
	--kwt-z-toast: 100;
}

:root[data-kwt-theme="light"] {
	color-scheme: light;

	--kwt-color-background: #f7f8fb;
	--kwt-color-foreground: #171923;
	--kwt-color-primary: #275fd6;
	--kwt-color-accent: #0f9f8f;
	--kwt-color-muted: #667085;
	--kwt-color-card: #ffffff;
	--kwt-color-border: rgba(102, 112, 133, 0.18);
	--kwt-color-selection: rgba(15, 159, 143, 0.28);
	--kwt-backdrop-background: rgba(255, 255, 255, 0.76);
	--kwt-backdrop-border: rgba(102, 112, 133, 0.18);
	--kwt-shadow-subtle: 0 1px 2px rgba(16, 24, 40, 0.05);
	--kwt-shadow-card: 0 18px 48px rgba(16, 24, 40, 0.08);
	--kwt-shadow-hover: 0 24px 70px rgba(16, 24, 40, 0.13);
	--kwt-shadow-focus: 0 0 0 4px rgba(39, 95, 214, 0.2);
}

:root[data-kwt-theme="dark"] {
	color-scheme: dark;

	--kwt-color-background: #0b1020;
	--kwt-color-foreground: #f3f6fb;
	--kwt-color-primary: #8ab4ff;
	--kwt-color-accent: #5eead4;
	--kwt-color-muted: #a7b0c0;
	--kwt-color-card: #151b2e;
	--kwt-color-border: rgba(167, 176, 192, 0.2);
	--kwt-color-selection: rgba(94, 234, 212, 0.26);
	--kwt-backdrop-background: rgba(11, 16, 32, 0.78);
	--kwt-backdrop-border: rgba(167, 176, 192, 0.18);
	--kwt-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.28);
	--kwt-shadow-card: 0 18px 54px rgba(0, 0, 0, 0.34);
	--kwt-shadow-hover: 0 26px 76px rgba(0, 0, 0, 0.46);
	--kwt-shadow-focus: 0 0 0 4px rgba(138, 180, 255, 0.24);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-kwt-theme]),
	:root[data-kwt-theme="auto"] {
		color-scheme: dark;

		--kwt-color-background: #0b1020;
		--kwt-color-foreground: #f3f6fb;
		--kwt-color-primary: #8ab4ff;
		--kwt-color-accent: #5eead4;
		--kwt-color-muted: #a7b0c0;
		--kwt-color-card: #151b2e;
		--kwt-color-border: rgba(167, 176, 192, 0.2);
		--kwt-color-selection: rgba(94, 234, 212, 0.26);
		--kwt-backdrop-background: rgba(11, 16, 32, 0.78);
		--kwt-backdrop-border: rgba(167, 176, 192, 0.18);
		--kwt-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.28);
		--kwt-shadow-card: 0 18px 54px rgba(0, 0, 0, 0.34);
		--kwt-shadow-hover: 0 26px 76px rgba(0, 0, 0, 0.46);
		--kwt-shadow-focus: 0 0 0 4px rgba(138, 180, 255, 0.24);
	}
}