/**
 * tokens.css — Hằng số thiết kế.
 *
 * Màu và phông chữ do Customizer sinh ra trong <head> (xem
 * inc/customizer.php → nusantara_css_variables). File này khai báo phần
 * còn lại: thang chữ, nhịp khoảng cách, độ sâu lớp, thời lượng chuyển động.
 *
 * Quy ước: mọi giá trị ở đây là nguồn sự thật duy nhất. Không hard-code
 * màu hay khoảng cách ở các file sau.
 */

:root {
	/* — Màu: giá trị mặc định, bị ghi đè bởi biến do Customizer in ra — */
	--c-ink: #133840;
	--c-ink-deep: #0c2730;
	--c-ink-soft: #2c5a61;
	--c-accent: #d9a05b;
	--c-accent-deep: #b9833f;

	/*
	 * Vàng dùng làm CHỮ trên nền sáng.
	 *
	 * Vàng #D9A05B đạt 2,1:1 trên nền cát và #B9833F đạt 3,0:1 — cả hai đều
	 * dưới ngưỡng 4,5:1 của WCAG AA cho chữ nhỏ. Vàng là màu của nắng và
	 * cát, rất đẹp khi làm NỀN cho nút, nhưng làm chữ trên nền sáng thì phải
	 * nheo mắt. Token này là bản tối hơn, giữ nguyên sắc độ, đạt 4,7:1.
	 *
	 * Giá trị thật do Customizer tính lại mỗi khi resort đổi màu nhấn, nên
	 * đổi bảng màu không làm chữ mất tương phản. Xem
	 * inc/customizer.php → nusantara_accent_text_color().
	 */
	--c-accent-text: #8a673a;

	--c-accent-soft: rgba(217, 160, 91, 0.14);
	--c-accent-line: rgba(217, 160, 91, 0.55);
	--c-sand: #f7f4ef;
	--c-surface: #fcfbf8;
	--c-line: rgba(19, 56, 64, 0.14);
	--c-line-strong: rgba(19, 56, 64, 0.28);
	--c-muted: rgba(19, 56, 64, 0.72);

	/* Chữ: mặc định cho tới khi Customizer ghi đè */
	--font-display: "Cormorant Garamond", "Times New Roman", serif;
	--font-body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* — Thang chữ: dùng clamp để không cần media query cho cỡ chữ — */
	--fs-micro: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--fs-lg: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
	--fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--fs-2xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
	--fs-3xl: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);

	--lh-tight: 1.06;
	--lh-snug: 1.25;
	--lh-body: 1.72;

	--ls-display: -0.018em;
	--ls-label: 0.06em;

	/* — Nhịp 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, 5rem);
	--section-y: clamp(4rem, 9vw, 8.5rem);
	--section-y-tight: clamp(2.5rem, 5vw, 4.5rem);
	--container: 1440px;
	--container-text: 46rem;
	--measure: 68ch;

	/* — Hình khối — */
	--radius: 2px;
	--radius-lg: 4px;
	--hairline: 1px solid var(--c-line);
	--hairline-strong: 1px solid var(--c-line-strong);

	/* — Chuyển động: một đường cong duy nhất cho toàn theme — */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 140ms;
	--dur: 280ms;
	--dur-slow: 620ms;

	/*
	 * — Bề mặt kính (liquid glass) —
	 *
	 * Chỉ dùng cho những bề mặt NỔI TRÊN ảnh hoặc nội dung đang cuộn: thanh
	 * đặt phòng, menu dọc, thanh header khi dính, nút nổi trên điện thoại.
	 *
	 * KHÔNG dùng cho thẻ phòng hay khối nội dung: chúng nằm trên nền phẳng
	 * một màu, không có gì phía sau để làm mờ. Kính mờ trên nền trơn chỉ tốn
	 * chi phí GPU mà mắt không thấy khác gì.
	 */
	--glass-blur: 22px;
	--glass-saturate: 1.7;
	--glass-brightness: 1.08;

	/*
	 * Kính sáng — dùng cho thanh đặt phòng, chữ đậm.
	 *
	 * Độ đặc 0,80: đủ trong để thấy ảnh phía sau chuyển động khi cuộn, đủ
	 * đặc để nhãn nhỏ 12px bên trong đạt tương phản WCAG AA. Trường hợp xấu
	 * nhất là khi phía sau là vùng ảnh tối — khi đó nền kính vẫn sáng và
	 * chữ đậm vẫn đọc được.
	 */
	--glass-light: rgba(247, 244, 239, 0.8);
	--glass-light-strong: rgba(247, 244, 239, 0.9);

	/*
	 * Kính tối — dùng cho menu và header, chữ sáng.
	 *
	 * Độ đặc 0,72 chứ không phải 0,62. Ở 0,62, khi trang phía sau sáng,
	 * nền kính chỉ còn tương phản khoảng 4,1:1 với chữ — dưới ngưỡng 4,5:1
	 * của WCAG AA cho chữ nhỏ, mà menu thì toàn chữ nhỏ. Kính trong hơn thì
	 * đẹp hơn, nhưng không đọc được thì vô nghĩa.
	 */
	--glass-dark: rgba(12, 39, 48, 0.72);
	--glass-dark-strong: rgba(12, 39, 48, 0.85);

	/* Viền sáng và vệt phản chiếu ở mép trên — đặc trưng của kính thật. */
	--glass-edge: rgba(255, 255, 255, 0.34);
	--glass-edge-dark: rgba(243, 239, 231, 0.22);
	--glass-specular: rgba(255, 255, 255, 0.55);

	--glass-shadow: 0 24px 60px -30px rgba(12, 39, 48, 0.55);
	--glass-radius: 14px;

	/* — Độ sâu lớp — */
	--z-deck: 60;
	--z-header: 80;
	--z-overlay: 90;
	--z-dock: 70;
	--z-modal: 120;
}

/*
 * Vùng nền tối: đảo vai trò chữ và đường kẻ, giữ nguyên màu nhấn.
 * Nhờ cách này, mọi component viết một lần là chạy đúng trên cả nền sáng
 * lẫn nền tối mà không cần bản CSS thứ hai.
 */
.is-dark {
	--c-text: #f3efe7;
	--c-text-muted: rgba(243, 239, 231, 0.72);
	--c-line: rgba(243, 239, 231, 0.18);
	--c-line-strong: rgba(243, 239, 231, 0.34);
	--c-surface: rgba(243, 239, 231, 0.04);

	/*
	 * Trên nền tối, vàng NHẠT mới là màu đọc được — bản vàng đậm dùng cho
	 * nền sáng sẽ chìm nghỉm ở đây. Đây đúng là nguyên tắc đảo vai trò mà
	 * vùng tối đang áp cho chữ và đường kẻ, áp thêm cho màu nhấn.
	 */
	--c-accent-text: var(--c-accent);

	color: var(--c-text);
}

:root {
	--c-text: var(--c-ink);
	--c-text-muted: var(--c-muted);
}

/*
 * Lớp hạt mịn. Chỉ đặt trên nền đậm để ảnh và khối màu có chiều sâu thay vì
 * phẳng lì. Kích thước rất nhỏ nên gần như không tốn băng thông.
 */
.grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}