/**
 * Design token.
 *
 * Mọi màu, khoảng cách, bo góc dùng trong child theme đều khai báo ở đây. Đổi
 * tông màu hay nhịp khoảng cách của cả site chỉ cần sửa file này, không phải đi
 * dò từng chỗ hardcode.
 */

:root {
	/* Màu nền và chữ */
	--cgnt-bg: #ffffff;
	--cgnt-bg-soft: #f7f7f7;
	--cgnt-text: #1a1a1a;
	--cgnt-text-muted: #6b6b6b;

	/* Đường viền. -strong dùng cho trạng thái đang chọn. */
	--cgnt-border: #e2e2e2;
	--cgnt-border-strong: #1a1a1a;

	/* Màu nhấn */
	--cgnt-sale: #dd1818;
	--cgnt-disabled: #b9b9b9;

	/* Khoảng cách — thang 4px */
	--cgnt-space-1: 4px;
	--cgnt-space-2: 8px;
	--cgnt-space-3: 12px;
	--cgnt-space-4: 16px;
	--cgnt-space-5: 24px;
	--cgnt-space-6: 32px;

	/* Bo góc */
	--cgnt-radius-sm: 4px;
	--cgnt-radius-md: 8px;
	--cgnt-radius-pill: 999px;

	/* Kích thước swatch */
	--cgnt-swatch-size: 34px;
	--cgnt-swatch-ring: 2px;
	--cgnt-dot-size: 14px;

	/* Chuyển động. Ngắn để cảm giác dứt khoát, không lề mề. */
	--cgnt-transition: 160ms ease;

	/* Chiều cao thanh sticky, dùng để chừa chỗ cuối trang */
	--cgnt-sticky-height: 68px;
}

/* Đường lui nếu parent theme không khai báo, để nhãn dành cho trình đọc màn
   hình không tràn ra giao diện. */
.cgnt-swatches .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--cgnt-transition: 0ms;
	}
}