/**
 * HALINK C8 — Design tokens
 * Matched to Dola Spa reference (navy / terracotta / cream).
 */

:root {
	/* Brand — Dola palette (100% reference match) */
	--c8-primary: #121F38;
	--c8-primary-dark: #0B1424;
	--c8-primary-light: #E8EBF0;
	--c8-secondary: #9A563A;
	--c8-secondary-dark: #7E422C;
	--c8-secondary-light: #F5EBE6;

	/* Semantic */
	--c8-success: #16A34A;
	--c8-danger: #DC2626;
	--c8-warning: #F59E0B;
	--c8-info: #0284C7;

	/* Neutrals — cream page ground */
	--c8-bg: #F0EFEB;
	--c8-bg-light: #F7F6F2;
	--c8-bg-elevated: #FFFFFF;
	--c8-border: #E4E2DC;
	--c8-border-strong: #D1CFC8;
	--c8-text: #1A1A1A;
	--c8-ink: #121F38;
	--c8-text-muted: #6B6B6B;
	--c8-text-light: #9A9A9A;
	--c8-white: #FFFFFF;
	--c8-black: #111827;

	/* Legacy aliases */
	--main-color: var(--c8-primary);
	--hover: var(--c8-secondary);
	--text-color: var(--c8-text);
	--price: #E11D48;
	--menu: var(--c8-text);
	--font-base: var(--c8-font);
	--font-title: var(--c8-font-display);

	/* Typography — Lora (display) + Be Vietnam Pro (UI) */
	--c8-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--c8-font-display: "Lora", Georgia, "Times New Roman", serif;

	/* Fluid type */
	--c8-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--c8-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
	--c8-text-base: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--c8-text-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	--c8-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--c8-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--c8-text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--c8-text-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	--c8-text-4xl: clamp(2rem, 1.5rem + 2vw, 3.125rem);

	--c8-leading-tight: 1.25;
	--c8-leading-snug: 1.375;
	--c8-leading-normal: 1.6;
	--c8-leading-relaxed: 1.75;

	--c8-weight-light: 300;
	--c8-weight-regular: 400;
	--c8-weight-medium: 500;
	--c8-weight-semibold: 600;
	--c8-weight-bold: 700;

	/* Spacing */
	--c8-space-1: 0.25rem;
	--c8-space-2: 0.5rem;
	--c8-space-3: 0.75rem;
	--c8-space-4: 1rem;
	--c8-space-5: 1.25rem;
	--c8-space-6: 1.5rem;
	--c8-space-8: 2rem;
	--c8-space-10: 2.5rem;
	--c8-space-12: 3rem;
	--c8-space-16: 4rem;
	--c8-space-20: 5rem;
	--c8-space-24: 6rem;

	/* Section rhythm (~70px) */
	--c8-section-y: 10px 0;
	--c8-section-y-sm: 3rem;
	--c8-section-gap: 50px;

	/* Layout */
	--c8-container: 1320px;
	--c8-container-wide: 1410px;
	--c8-container-narrow: 800px;
	--c8-gutter: clamp(1rem, 3vw, 1.5rem);
	--c8-header-h: 91px;
	--c8-header-h-sticky: 72px;
	--c8-topbar-h: 42px;

	/* Radius — spa CTA asymmetric */
	--c8-radius-sm: 6px;
	--c8-radius: 10px;
	--c8-radius-lg: 16px;
	--c8-radius-xl: 20px;
	--c8-radius-cta: 20px 5px 20px 5px;
	--c8-radius-full: 9999px;

	/* Shadows */
	--c8-shadow-xs: 0 1px 2px rgba(18, 31, 56, 0.04);
	--c8-shadow-sm: 0 2px 8px rgba(18, 31, 56, 0.06);
	--c8-shadow: 0 4px 20px rgba(18, 31, 56, 0.08);
	--c8-shadow-lg: 0 12px 40px rgba(18, 31, 56, 0.12);
	--c8-shadow-focus: 0 0 0 3px rgba(154, 86, 58, 0.25);

	/* Motion */
	--c8-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--c8-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--c8-duration-fast: 150ms;
	--c8-duration: 280ms;
	--c8-duration-slow: 450ms;

	/* Z-index */
	--c8-z-dropdown: 100;
	--c8-z-sticky: 200;
	--c8-z-overlay: 300;
	--c8-z-modal: 400;
	--c8-z-toast: 500;
}