/*
 * Brand: "Silent Craftsman" — dark + gold, góc vuông sắc cạnh.
 * Typography: Barlow (display/headline) + Inter (body), self-hosted trong assets/fonts/.
 */
:root {
	/* Colors */
	--color-black: #0a0a0a;
	--color-black-soft: #121212;
	--color-cream: #f5f2ea;
	--color-cream-muted: #9a9a92;
	--color-gold: #ffcc33; /* vàng thương hiệu 9G — rgb(255, 204, 51) */
	--color-gold-rgb: 255, 204, 51; /* dùng cho rgba(), giữ 1 nguồn màu duy nhất */
	--color-gold-bright: #ffdb66; /* biến thể sáng hơn cho hover */
	--color-border: rgba(245, 242, 234, 0.12);

	--color-bg: var(--color-black);
	--color-bg-alt: var(--color-black-soft);
	--color-text: var(--color-cream);
	--color-text-muted: var(--color-cream-muted);
	--color-accent: var(--color-gold);

	/* Typography */
	--font-display: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* Barlow không có trục width — giữ normal, tuyệt đối không kéo giãn (gây méo chữ + vỡ dấu tiếng Việt) */
	--font-stretch-display: normal;

	--fs-hero: clamp(2.5rem, 6vw, 5rem);
	--fs-h1: clamp(2rem, 4vw, 3.25rem);
	--fs-h2: clamp(1.5rem, 3vw, 2.25rem);
	--fs-h3: 1.25rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 8rem;

	/* Layout */
	--container-width: 1280px;
	--radius: 0; /* góc vuông sắc cạnh — không bo tròn */

	--transition-base: 0.3s ease;
}