/**
 * tokens.css — toàn bộ biến thiết kế của Loka.
 *
 * Mọi màu, cỡ chữ, khoảng cách và bo góc đều khai ở đây. Các lớp sau chỉ
 * ĐỌC biến, không viết giá trị thô. Nhờ vậy đổi bảng màu hay đổi độ bo góc
 * là sửa đúng một chỗ.
 *
 * Bảng màu lấy từ brief: xanh rừng thông, đất nung, kem bơ, đen than.
 * Tinh thần: gần gũi, ấm, hơi boho — bo góc mềm, bóng đổ nhẹ, không có
 * đường viền cứng.
 */

:root {
	/* — Màu — */
	--c-pine: #2D4739;
	--c-pine-deep: #1C2E25;
	--c-pine-soft: #3E5C4A;
	--c-terracotta: #C86D51;
	--c-terracotta-deep: #A9553C;
	--c-cream: #FDFBF7;
	--c-cream-deep: #F4EDE2;
	--c-charcoal: #222222;
	--c-charcoal-soft: #4A4A4A;
	--c-white: #FFFFFF;

	/* Màu chữ và đường kẻ, suy ra từ bốn màu gốc */
	--c-text: var(--c-charcoal);
	--c-text-muted: rgba(34, 34, 34, 0.68);
	--c-line: rgba(45, 71, 57, 0.14);
	--c-line-strong: rgba(45, 71, 57, 0.28);
	--c-accent-soft: rgba(200, 109, 81, 0.12);
	--c-accent-line: rgba(200, 109, 81, 0.5);

	/* Trên nền đậm */
	--c-on-dark: #F6F1E7;
	--c-on-dark-muted: rgba(246, 241, 231, 0.72);
	--c-line-dark: rgba(246, 241, 231, 0.18);

	/* — Phông chữ — */
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

	--fs-micro: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-md: 1.0625rem;
	--fs-lg: 1.25rem;
	--fs-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	--fs-2xl: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
	--fs-3xl: clamp(2.6rem, 1.6rem + 4.6vw, 4.8rem);

	--ls-label: 0.08em;
	--lh-body: 1.65;
	--lh-tight: 1.15;

	/* — Khoảng cách — */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	--gutter: clamp(1.25rem, 5vw, 4rem);
	--container: 1320px;
	--container-text: 46rem;

	/* — Bo góc: mềm, đây là dấu hiệu nhận dạng của theme — */
	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* — Bóng đổ: nhẹ và ấm, không dùng bóng xám lạnh — */
	--shadow-sm: 0 2px 8px -4px rgba(45, 71, 57, 0.18);
	--shadow: 0 12px 32px -18px rgba(45, 71, 57, 0.35);
	--shadow-lg: 0 28px 64px -32px rgba(45, 71, 57, 0.45);

	/* — Chuyển động — */
	--dur: 220ms;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* — Lớp xếp chồng — */
	--z-deck: 20;
	--z-header: 40;
	--z-overlay: 60;
}

/*
 * Nền đậm dùng chung: chân trang, dải CTA, khối trải nghiệm.
 * Đặt trên .is-dark để bất cứ khối nào cũng dùng lại được mà không phải
 * khai lại từng biến.
 */
.is-dark {
	--c-text: var(--c-on-dark);
	--c-text-muted: var(--c-on-dark-muted);
	--c-line: var(--c-line-dark);
	--c-line-strong: rgba(246, 241, 231, 0.34);

	background: var(--c-pine-deep);
	color: var(--c-on-dark);
}