/**
 * Tom Luxury — Design tokens
 * -----------------------------------------------------------------------------
 * File nay CHI chua CSS custom property. Khong duoc them bat ky rule trinh bay
 * nao khac (khong selector thanh phan, khong reset, khong component).
 * Moi mau / khoang cach / font trong theme phai tham chieu bien o day.
 * -----------------------------------------------------------------------------
 */

:root {
	/* ---------------------------------------------------------------------
	 * 1. Mau thuong hieu (plan §9.2)
	 * ------------------------------------------------------------------ */
	--color-primary: #1e1b18;
	--color-secondary: #2d241f;
	--color-luxury-gold: #b08a55;
	--color-gold-light: #c8a96a;
	--color-background: #f8f7f5;
	--color-surface: #ffffff;
	--color-text: #2b2b2b;
	--color-muted: #767676;
	--color-border: #eae6e0;
	--color-success: #4e7a56;
	--color-overlay: rgba(16, 13, 11, .58);
	--color-error: #b3261e;

	/* ---------------------------------------------------------------------
	 * 2. Mau phai sinh — dung cho panel toi, vien mo, nen nhan
	 * ------------------------------------------------------------------ */
	--color-on-dark: #f4f1ec;
	--color-on-dark-muted: rgba(244, 241, 236, .70);
	--color-border-dark: rgba(244, 241, 236, .16);
	--color-surface-dark: #241f1b;
	--color-gold-soft: rgba(176, 138, 85, .12);
	--color-gold-line: rgba(176, 138, 85, .38);
	--color-shade: rgba(30, 27, 24, .06);
	--color-shade-strong: rgba(30, 27, 24, .12);
	--color-overlay-soft: rgba(16, 13, 11, .32);
	--color-focus: var(--color-secondary);

	/* ---------------------------------------------------------------------
	 * 3. Chu (plan §9.3) — font da self-host tai assets/fonts/fonts.css
	 * ------------------------------------------------------------------ */
	--font-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	--font-body: "Inter", "Manrope", Arial, sans-serif;

	--font-size-xs: .75rem;
	--font-size-sm: .875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.75rem;
	--font-size-5xl: 4rem;
	--font-size-hero: clamp(2.75rem, 6vw, 5.75rem);

	/* Thang tieu de responsive dung chung */
	--font-size-h1: clamp(2.25rem, 4.6vw, var(--font-size-5xl));
	--font-size-h2: clamp(1.875rem, 3.4vw, var(--font-size-4xl));
	--font-size-h3: clamp(1.5rem, 2.4vw, var(--font-size-3xl));
	--font-size-h4: clamp(1.25rem, 1.8vw, var(--font-size-2xl));

	--leading-tight: 1.15;
	--leading-snug: 1.34;
	--leading-base: 1.65;
	--leading-loose: 1.8;

	--tracking-tight: 0;
	--tracking-wide: .08em;
	--tracking-wider: .16em;
	--tracking-widest: .26em;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/* ---------------------------------------------------------------------
	 * 4. Layout (plan §9.4)
	 * ------------------------------------------------------------------ */
	--container-sm: 960px;
	--container-md: 1140px;
	--container-lg: 1320px;

	--space-section-desktop: 120px;
	--space-section-tablet: 88px;
	--space-section-mobile: 64px;

	/* Gia tri dang ap dung — doi theo breakpoint o cuoi file */
	--space-section: var(--space-section-desktop);
	--container-pad: 32px;
	--grid-gap: 28px;
	--header-h: 96px;

	/* Thang khoang cach phai sinh */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 48px;
	--space-2xl: 64px;
	--space-3xl: 88px;
	--space-4xl: 120px;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	--shadow-soft: 0 18px 45px rgba(25, 20, 17, .08);
	--shadow-card: 0 10px 26px rgba(25, 20, 17, .06);
	--shadow-lift: 0 24px 60px rgba(25, 20, 17, .14);

	/* Vung cham toi thieu WCAG 2.1 AA */
	--tap-target: 44px;
	--control-h: 48px;

	/* ---------------------------------------------------------------------
	 * 5. Chuyen dong (plan §18) — 200..500ms
	 * ------------------------------------------------------------------ */
	--dur-fast: 200ms;
	--dur: 320ms;
	--dur-slow: 480ms;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);

	/* ---------------------------------------------------------------------
	 * 6. Tang xep chong
	 * ------------------------------------------------------------------ */
	--z-base: 1;
	--z-sticky: 100;
	--z-float: 300;
	--z-header: 500;
	--z-overlay: 700;

	/* ---------------------------------------------------------------------
	 * 7. Trang tri — do day duong ke va kich thuoc hinh thoi vang
	 * ------------------------------------------------------------------ */
	--rule-w: 1px;
	--diamond: 8px;
	--ornament-line: clamp(28px, 8vw, 104px);
	--focus-w: 2px;
	--focus-offset: 3px;
}

/* Tablet — plan §9.4: section 88px, padding ngang 24px */
@media (max-width: 1024px) {
	:root {
		--space-section: var(--space-section-tablet);
		--container-pad: 24px;
		--grid-gap: 24px;
		--header-h: 72px;
	}
}

/* Mobile — plan §9.4: section 64px, padding ngang 18px */
@media (max-width: 640px) {
	:root {
		--space-section: var(--space-section-mobile);
		--container-pad: 18px;
		--grid-gap: 20px;
		--header-h: 60px;
	}
}

/* Man hinh rat nho */
@media (max-width: 380px) {
	:root {
		--container-pad: 16px;
	}
}