/**
 * V4 design tokens — tông tím hồng chủ đạo, gradient nền & chữ (.ui-v4).
 */
.ui-v4 {
	/* Chủ đạo: tím — hồng */
	--v4-primary: #db2777;
	--v4-secondary: #9333ea;
	--v4-accent: #f472b6;
	--v4-gold: #fbcfe8;
	--v4-cinnabar: #e11d48;
	--v4-jade: #c084fc;
	--v4-mystic-blue: #7c3aed;
	--v4-peach: #fda4af;
	--v4-fuchsia: #e879f9;
	--v4-lilac: #ddd6fe;

	/* Bề mặt — nền tím đậm có sắc hồng */
	--v4-surface-1: rgba(36, 12, 48, 0.94);
	--v4-surface-2: rgba(48, 16, 62, 0.9);
	--v4-surface-3: rgba(62, 20, 78, 0.86);

	--v4-border: rgba(244, 114, 182, 0.22);
	--v4-border-glow: rgba(192, 132, 252, 0.38);
	--v4-divider: rgba(255, 255, 255, 0.08);
	--v4-edge: rgba(253, 244, 255, 0.1);
	--v4-edge-strong: rgba(253, 244, 255, 0.14);

	--v4-text-main: #fdf4ff;
	--v4-text-soft: rgba(253, 244, 255, 0.88);
	--v4-text-dim: rgba(253, 244, 255, 0.52);

	--v4-danger: #fb7185;
	--v4-success: #34d399;
	--v4-warning: #fcd34d;

	/* Chữ / icon trên nền gradient đậm (tương phản WCAG) */
	--v4-on-gradient: #fdf4ff;
	--v4-on-gradient-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.35);

	--v4-radius-lg: 16px;
	--v4-radius-md: 12px;
	--v4-shadow-elevated: 0 18px 48px rgba(24, 4, 36, 0.72);

	--v4-font-display: "Georgia", "Times New Roman", "Songti SC", "STSong", serif;

	/* Gradient nền lớn */
	--v4-grad-hero: linear-gradient(
		125deg,
		rgba(147, 51, 234, 0.5) 0%,
		rgba(88, 28, 135, 0.38) 38%,
		rgba(219, 39, 119, 0.32) 72%,
		rgba(244, 114, 182, 0.22) 100%
	);
	--v4-grad-cta: linear-gradient(115deg, #db2777 0%, #a855f7 45%, #f472b6 78%, #fce7f3 100%);
	--v4-grad-sky: radial-gradient(ellipse 130% 85% at 50% -18%, rgba(192, 132, 252, 0.55), transparent 58%);
	--v4-grad-surface: linear-gradient(
		165deg,
		rgba(72, 22, 88, 0.55) 0%,
		rgba(36, 8, 52, 0.75) 48%,
		rgba(24, 4, 40, 0.88) 100%
	);
	--v4-grad-veil: linear-gradient(
		180deg,
		rgba(12, 2, 22, 0.88) 0%,
		rgba(26, 6, 40, 0.72) 32%,
		rgba(18, 4, 34, 0.68) 55%,
		rgba(8, 2, 16, 0.9) 100%
	);
	--v4-grad-mesh: radial-gradient(ellipse 85% 55% at 100% 32%, rgba(219, 39, 119, 0.14), transparent 52%),
		radial-gradient(ellipse 70% 50% at 0% 72%, rgba(167, 139, 250, 0.12), transparent 50%),
		radial-gradient(ellipse 60% 45% at 50% 108%, rgba(244, 114, 182, 0.1), transparent 55%);

	/* Gradient chữ (tiêu đề, logo) */
	--v4-grad-text-display: linear-gradient(
		95deg,
		#fff 0%,
		#fce7f3 18%,
		#f9a8d4 38%,
		#e879f9 58%,
		#ddd6fe 78%,
		#fdf4ff 100%
	);
	--v4-grad-text-accent: linear-gradient(90deg, #fbcfe8, #f472b6, #c084fc, #e9d5ff);
	--v4-grad-text-subtle: linear-gradient(92deg, var(--v4-text-main), var(--v4-peach), var(--v4-lilac));

	/* Vệt sáng viền / underline (thay cặp vàng–ngọc) */
	--v4-grad-line: linear-gradient(
		90deg,
		transparent 0%,
		rgba(251, 207, 232, 0.35) 22%,
		rgba(244, 114, 182, 0.55) 42%,
		rgba(192, 132, 252, 0.5) 58%,
		rgba(251, 207, 232, 0.35) 78%,
		transparent 100%
	);
	--v4-grad-line-strong: linear-gradient(
		90deg,
		transparent 4%,
		rgba(251, 207, 232, 0.4) 38%,
		rgba(192, 132, 252, 0.45) 50%,
		rgba(251, 207, 232, 0.4) 62%,
		transparent 96%
	);
	--v4-grad-ribbon: linear-gradient(92deg, rgba(219, 39, 119, 0.95), rgba(147, 51, 234, 0.9), rgba(244, 114, 182, 0.88));
	--v4-grad-header: linear-gradient(
		180deg,
		rgba(42, 12, 58, 0.98) 0%,
		rgba(28, 6, 44, 0.96) 45%,
		rgba(14, 2, 28, 0.94) 100%
	);
	--v4-grad-header-shine: linear-gradient(180deg, rgba(192, 132, 252, 0.08) 0%, transparent 55%);

	/* Lặp lại nhiều — gom rgba tím hồng */
	--v4-hl-06: rgba(251, 207, 232, 0.06);
	--v4-hl-08: rgba(251, 207, 232, 0.08);
	--v4-hl-09: rgba(251, 207, 232, 0.09);
	--v4-hl-10: rgba(251, 207, 232, 0.1);
	--v4-hl-12: rgba(251, 207, 232, 0.12);
	--v4-hl-14: rgba(251, 207, 232, 0.14);
	--v4-hl-16: rgba(251, 207, 232, 0.16);
	--v4-hl-18: rgba(251, 207, 232, 0.18);
	--v4-hl-20: rgba(251, 207, 232, 0.2);
	--v4-hl-22: rgba(251, 207, 232, 0.22);
	--v4-hl-24: rgba(251, 207, 232, 0.24);
	--v4-hl-25: rgba(251, 207, 232, 0.25);
	--v4-hl-28: rgba(251, 207, 232, 0.28);
	--v4-hl-30: rgba(251, 207, 232, 0.3);
	--v4-hl-32: rgba(251, 207, 232, 0.32);
	--v4-hl-35: rgba(251, 207, 232, 0.35);
	--v4-hl-38: rgba(251, 207, 232, 0.38);
	--v4-hl-40: rgba(251, 207, 232, 0.4);
	--v4-hl-42: rgba(251, 207, 232, 0.42);
	--v4-hl-45: rgba(251, 207, 232, 0.45);
	--v4-hl-52: rgba(251, 207, 232, 0.52);
	--v4-hl-55: rgba(251, 207, 232, 0.55);
	--v4-hl-62: rgba(251, 207, 232, 0.62);

	--v4-vi-12: rgba(167, 139, 250, 0.12);
	--v4-vi-15: rgba(139, 92, 246, 0.15);
	--v4-vi-18: rgba(139, 92, 246, 0.18);
	--v4-vi-20: rgba(139, 92, 246, 0.2);
	--v4-vi-22: rgba(139, 92, 246, 0.22);
	--v4-vi-28: rgba(139, 92, 246, 0.28);
	--v4-vi-35: rgba(139, 92, 246, 0.35);
	--v4-vi-38: rgba(139, 92, 246, 0.38);
	--v4-vi-40: rgba(139, 92, 246, 0.4);

	--v4-pk-10: rgba(244, 114, 182, 0.1);
	--v4-pk-12: rgba(244, 114, 182, 0.12);
	--v4-pk-25: rgba(244, 114, 182, 0.25);
	--v4-pk-35: rgba(244, 114, 182, 0.35);
	--v4-pk-45: rgba(244, 114, 182, 0.45);
	--v4-pk-55: rgba(244, 114, 182, 0.55);

	--v4-deep-12: rgba(219, 39, 119, 0.12);
	--v4-deep-15: rgba(219, 39, 119, 0.15);
	--v4-deep-55: rgba(219, 39, 119, 0.55);

	/* Aliases portal / hero markup */
	--km-v3-orange: var(--v4-fuchsia);
	--km-v3-red: var(--v4-primary);
	--km-v3-glow: rgba(244, 114, 182, 0.5);
	--km-v3-radius-md: var(--v4-radius-md);
	--km-accent: var(--v4-accent);
	--km-accent2: var(--v4-fuchsia);
}