/*
 * SINH TỰ ĐỘNG bởi tools/build-tokens.mjs — đừng sửa tay.
 * Nguồn: packages/nd-base/src/design-system.json
 *
 * theme.json đã lo chế độ sáng ở :root. File này chỉ thêm lớp đổi chế độ
 * cho phạm vi section: bất kỳ khối nào mang .nd-scheme-dark đều ánh xạ lại
 * toàn bộ token semantic sang giá trị tối, nên pattern bên trong không cần
 * biết mình đang nằm trên tông nào (CLAUDE.md §1, T2.2).
 */

:root {
	color-scheme: light;
}

.nd-scheme-dark,
[data-nd-scheme="dark"] {
	color-scheme: dark;
	--wp--preset--color--canvas: #191b1e;
	--wp--preset--color--surface: #2c2e32;
	--wp--preset--color--surface-raised: #404248;
	--wp--preset--color--line: #52555c;
	--wp--preset--color--fg: #ecedef;
	--wp--preset--color--fg-muted: #c1c4c9;
	--wp--preset--color--fg-on-brand: #191b1e;
	--wp--preset--color--brand: #b6bfff;
	--wp--preset--color--brand-subtle: #250a80;
	--wp--preset--color--accent: #ffac95;
	--wp--custom--color--border-strong: #a4a8ae;
	--wp--custom--color--brand-hover: #d4daff;
	--wp--custom--color--focus: #b6bfff;
	--wp--custom--color--success: #99d5aa;
	--wp--custom--color--danger: #ffab9e;
	--wp--custom--color--fg-on-scrim: #ffffff;
	--wp--preset--gradient--brand-soft: linear-gradient(135deg, #4528d5 0%, #250a80 100%);
	--wp--preset--gradient--brand-vivid: linear-gradient(120deg, #4528d5 0%, #972800 100%);
	--wp--preset--gradient--scrim-top: linear-gradient(180deg, rgb(10 10 10 / 0.72) 0%, rgb(10 10 10 / 0.38) 45%, rgb(10 10 10 / 0) 100%);
	--wp--preset--gradient--scrim-hero: linear-gradient(180deg, rgb(10 10 10 / 0.62) 0%, rgb(10 10 10 / 0.78) 100%);
	--wp--preset--gradient--scrim-header: linear-gradient(180deg, rgb(10 10 10 / 0.72) 0%, rgb(10 10 10 / 0.66) 40%, rgb(10 10 10 / 0.6) 70%, rgb(10 10 10 / 0) 100%);
	--wp--preset--gradient--scrim-bottom: linear-gradient(0deg, rgb(10 10 10 / 0.82) 0%, rgb(10 10 10 / 0.62) 30%, rgb(10 10 10 / 0) 100%);
	--wp--preset--gradient--surface-fade: linear-gradient(180deg, #2c2e32 0%, #191b1e 100%);
	--wp--preset--shadow--sm: 0 1px 2px 0 rgb(10 10 10 / 0.5), 0 1px 3px 0 rgb(10 10 10 / 0.4);
	--wp--preset--shadow--md: 0 2px 4px -1px rgb(10 10 10 / 0.5), 0 8px 16px -4px rgb(10 10 10 / 0.55);
	--wp--preset--shadow--lg: 0 4px 8px -2px rgb(10 10 10 / 0.55), 0 24px 48px -12px rgb(10 10 10 / 0.65);
}

.nd-scheme-light,
[data-nd-scheme="light"] {
	color-scheme: light;
	--wp--preset--color--canvas: #ffffff;
	--wp--preset--color--surface: #f5f6f7;
	--wp--preset--color--surface-raised: #ffffff;
	--wp--preset--color--line: #dbdce0;
	--wp--preset--color--fg: #2c2e32;
	--wp--preset--color--fg-muted: #686c73;
	--wp--preset--color--fg-on-brand: #ffffff;
	--wp--preset--color--brand: #5743f8;
	--wp--preset--color--brand-subtle: #f3f5ff;
	--wp--preset--color--accent: #bc3500;
	--wp--custom--color--border-strong: #83868d;
	--wp--custom--color--brand-hover: #4528d5;
	--wp--custom--color--focus: #5743f8;
	--wp--custom--color--success: #138145;
	--wp--custom--color--danger: #c8140b;
	--wp--custom--color--fg-on-scrim: #ffffff;
	--wp--preset--gradient--brand-soft: linear-gradient(135deg, #6f6fff 0%, #4528d5 100%);
	--wp--preset--gradient--brand-vivid: linear-gradient(120deg, #5743f8 0%, #bc3500 100%);
	--wp--preset--gradient--scrim-top: linear-gradient(180deg, rgb(10 10 10 / 0.72) 0%, rgb(10 10 10 / 0.38) 45%, rgb(10 10 10 / 0) 100%);
	--wp--preset--gradient--scrim-hero: linear-gradient(180deg, rgb(10 10 10 / 0.62) 0%, rgb(10 10 10 / 0.78) 100%);
	--wp--preset--gradient--scrim-header: linear-gradient(180deg, rgb(10 10 10 / 0.72) 0%, rgb(10 10 10 / 0.66) 40%, rgb(10 10 10 / 0.6) 70%, rgb(10 10 10 / 0) 100%);
	--wp--preset--gradient--scrim-bottom: linear-gradient(0deg, rgb(10 10 10 / 0.82) 0%, rgb(10 10 10 / 0.62) 30%, rgb(10 10 10 / 0) 100%);
	--wp--preset--gradient--surface-fade: linear-gradient(180deg, #ecedef 0%, #ffffff 100%);
	--wp--preset--shadow--sm: 0 1px 2px 0 rgb(25 27 30 / 0.06), 0 1px 3px 0 rgb(25 27 30 / 0.08);
	--wp--preset--shadow--md: 0 2px 4px -1px rgb(25 27 30 / 0.06), 0 8px 16px -4px rgb(25 27 30 / 0.1);
	--wp--preset--shadow--lg: 0 4px 8px -2px rgb(25 27 30 / 0.08), 0 24px 48px -12px rgb(25 27 30 / 0.18);
}

/*
 * Tôn trọng prefers-reduced-motion bằng cách hạ chính token thời lượng —
 * không dùng `* { transition: none !important }` vì CLAUDE.md §1.5 cấm
 * !important trong theme. Mọi hiệu ứng đều phải đọc token này.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--wp--custom--motion--duration-fast: 1ms;
		--wp--custom--motion--duration-base: 1ms;
		--wp--custom--motion--duration-slow: 1ms;
		--wp--custom--motion--delay-menu-open: 0ms;
		--wp--custom--motion--delay-menu-close: 0ms;
	}
}