/**
 * HALINK C9 — Design tokens (Luxury Spa)
 * Palette from C9 Luxury Spa mockup: cream, forest green, gold.
 */

:root {
	--hl-primary: #2f3b28;
	--hl-primary-dark: #232c1e;
	--hl-primary-light: #e8ebe4;
	--hl-secondary: #b89a5a;
	--hl-secondary-dark: #8f6c38;
	--hl-secondary-light: #f4efe4;
	--hl-success: #3f6b45;
	--hl-danger: #b42318;
	--hl-warning: #c47d1a;
	--hl-info: #4a6b7c;

	--hl-bg: #f7f3ec;
	--hl-bg-soft: #f1ebe2;
	--hl-bg-muted: #e8e1d5;
	--hl-elevated: #fffcf7;

	--hl-border: #ddd4c6;
	--hl-border-strong: #c9bead;

	--hl-text: #2a2a26;
	--hl-muted: #6f6a60;
	--hl-text-light: #948c80;
	--hl-ink: #1c2218;
	--hl-white: #ffffff;
	--hl-black: #12150f;
	--hl-gold: #b89a5a;
	--hl-cream: #f7f3ec;
	--hl-forest: #2f3b28;

	--hl-price: #2f3b28;

	/* Be Vietnam Pro: rõ chữ, đủ dấu tiếng Việt, ổn định trên mọi thiết bị */
	--hl-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hl-font-body: var(--hl-font);
	--hl-font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hl-font-script: "Be Vietnam Pro", system-ui, sans-serif;

	--hl-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--hl-text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
	--hl-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
	--hl-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--hl-text-xl: clamp(1.35rem, 1.15rem + 0.7vw, 1.65rem);
	--hl-text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.35rem);
	--hl-text-3xl: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
	--hl-text-4xl: clamp(2.75rem, 2rem + 2.8vw, 4.25rem);

	--hl-space-1: 0.25rem;
	--hl-space-2: 0.5rem;
	--hl-space-3: 0.75rem;
	--hl-space-4: 1rem;
	--hl-space-5: 1.5rem;
	--hl-space-6: 2rem;
	--hl-space-7: 3rem;
	--hl-space-8: 4.5rem;
	--hl-space-9: 6rem;

	--hl-radius-sm: 0.25rem;
	--hl-radius: 0.5rem;
	--hl-radius-lg: 0.85rem;
	--hl-radius-xl: 1.5rem;
	--hl-radius-pill: 9999px;

	--hl-shadow-sm: 0 1px 2px rgba(28, 34, 24, 0.05);
	--hl-shadow: 0 10px 30px rgba(28, 34, 24, 0.08);
	--hl-shadow-lg: 0 20px 50px rgba(28, 34, 24, 0.14);

	--hl-header-h: 88px;
	--hl-header-sticky: 72px;
	--hl-topbar-h: 0px;
	--hl-container: 1240px;
	--hl-transition: 0.28s ease;
	--hl-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--hl-z-header: 1030;
	--hl-z-offcanvas: 1045;
	--hl-z-modal: 1055;
	--hl-z-toast: 1080;

	--main-color: var(--hl-primary);
	--hover: var(--hl-gold);
	--font-base: var(--hl-font);
	--font-title: var(--hl-font-display);
	--text-color: var(--hl-text);
	--price: var(--hl-price);
	--menu: var(--hl-text);
}