/*
 * 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;
}

/*
 * Bí danh của các bậc khoảng cách đã bỏ. Chỉ dành cho nội dung viết ra
 * trước khi thang rút còn bảy bậc — mã nguồn mới không được dùng.
 */
:root {
	--wp--preset--spacing--3-xs: var(--wp--preset--spacing--2-xs);
	--wp--preset--spacing--xs: var(--wp--preset--spacing--sm);
	--wp--preset--spacing--4-xl: var(--wp--preset--spacing--3-xl);
}

.nd-scheme-dark,
[data-nd-scheme="dark"] {
	color-scheme: dark;
	--wp--preset--color--canvas: oklch(from var(--wp--custom--base--fg) 0.22 c h);
	--wp--preset--color--surface: oklch(from var(--wp--custom--base--fg) 0.28 c h);
	--wp--preset--color--surface-raised: oklch(from var(--wp--custom--base--fg) 0.34 c h);
	--wp--preset--color--line: oklch(from var(--wp--custom--base--fg) 0.45 c h);
	--wp--preset--color--fg: oklch(from var(--wp--custom--base--fg) 0.95 c h);
	--wp--preset--color--fg-muted: oklch(from var(--wp--custom--base--fg-muted) 0.82 c h);
	--wp--preset--color--fg-on-brand: oklch(from var(--wp--custom--base--fg) 0.22 c h);
	--wp--preset--color--brand: oklch(from var(--wp--custom--base--brand) 0.86 c h);
	--wp--preset--color--brand-subtle: oklch(from var(--wp--custom--base--brand) 0.3 c h);
	--wp--preset--color--accent: oklch(from var(--wp--custom--base--accent) 0.86 c h);
	--wp--custom--color--border-strong: oklch(from var(--wp--custom--base--border-strong) 0.78 c h);
	--wp--custom--color--brand-hover: oklch(from var(--wp--custom--base--brand-hover) 0.91 c h);
	--wp--custom--color--focus: oklch(from var(--wp--custom--base--focus) 0.85 c h);
	--wp--custom--color--success: oklch(from var(--wp--custom--base--success) 0.85 c h);
	--wp--custom--color--danger: oklch(from var(--wp--custom--base--danger) 0.88 c h);
	--wp--custom--color--fg-on-scrim: #ffffff;
	--wp--custom--anchor--canvas: var(--wp--preset--color--canvas);
	--wp--custom--anchor--surface: var(--wp--preset--color--surface);
	--wp--custom--anchor--surface-raised: var(--wp--preset--color--surface-raised);
	--wp--custom--anchor--line: var(--wp--preset--color--line);
	--wp--custom--anchor--border-strong: var(--wp--custom--color--border-strong);
	--wp--custom--anchor--fg: var(--wp--preset--color--fg);
	--wp--custom--anchor--fg-muted: var(--wp--preset--color--fg-muted);
	--wp--custom--anchor--fg-on-brand: var(--wp--preset--color--fg-on-brand);
	--wp--custom--anchor--brand: var(--wp--preset--color--brand);
	--wp--custom--anchor--brand-hover: var(--wp--custom--color--brand-hover);
	--wp--custom--anchor--brand-subtle: var(--wp--preset--color--brand-subtle);
	--wp--custom--anchor--accent: var(--wp--preset--color--accent);
	--wp--custom--anchor--focus: var(--wp--custom--color--focus);
	--wp--custom--anchor--success: var(--wp--custom--color--success);
	--wp--custom--anchor--danger: var(--wp--custom--color--danger);
	--wp--custom--anchor--fg-on-scrim: var(--wp--custom--color--fg-on-scrim);
	--wp--preset--gradient--brand-soft: linear-gradient(135deg, color-mix(in oklab, var(--wp--custom--anchor--brand) 60%, var(--wp--custom--anchor--canvas)) 0%, color-mix(in oklab, var(--wp--custom--anchor--brand) 35%, var(--wp--custom--anchor--canvas)) 100%);
	--wp--preset--gradient--brand-vivid: linear-gradient(120deg, color-mix(in oklab, var(--wp--custom--anchor--brand) 42%, var(--wp--custom--anchor--canvas)) 0%, color-mix(in oklab, var(--wp--custom--anchor--accent) 42%, var(--wp--custom--anchor--canvas)) 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, var(--wp--custom--anchor--surface) 0%, var(--wp--custom--anchor--canvas) 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--custom--anchor--canvas: var(--wp--preset--color--canvas);
	--wp--custom--anchor--surface: var(--wp--preset--color--surface);
	--wp--custom--anchor--surface-raised: var(--wp--preset--color--surface-raised);
	--wp--custom--anchor--line: var(--wp--preset--color--line);
	--wp--custom--anchor--border-strong: var(--wp--custom--color--border-strong);
	--wp--custom--anchor--fg: var(--wp--preset--color--fg);
	--wp--custom--anchor--fg-muted: var(--wp--preset--color--fg-muted);
	--wp--custom--anchor--fg-on-brand: var(--wp--preset--color--fg-on-brand);
	--wp--custom--anchor--brand: var(--wp--preset--color--brand);
	--wp--custom--anchor--brand-hover: var(--wp--custom--color--brand-hover);
	--wp--custom--anchor--brand-subtle: var(--wp--preset--color--brand-subtle);
	--wp--custom--anchor--accent: var(--wp--preset--color--accent);
	--wp--custom--anchor--focus: var(--wp--custom--color--focus);
	--wp--custom--anchor--success: var(--wp--custom--color--success);
	--wp--custom--anchor--danger: var(--wp--custom--color--danger);
	--wp--custom--anchor--fg-on-scrim: var(--wp--custom--color--fg-on-scrim);
	--wp--preset--gradient--brand-soft: linear-gradient(135deg, color-mix(in oklab, var(--wp--custom--anchor--brand) 82%, var(--wp--custom--anchor--canvas)) 0%, color-mix(in oklab, var(--wp--custom--anchor--fg) 22%, var(--wp--custom--anchor--brand)) 100%);
	--wp--preset--gradient--brand-vivid: linear-gradient(120deg, var(--wp--custom--anchor--brand) 0%, var(--wp--custom--anchor--accent) 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, color-mix(in oklab, var(--wp--custom--anchor--fg) 6%, var(--wp--custom--anchor--canvas)) 0%, var(--wp--custom--anchor--canvas) 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;
	}
}