/* ==========================================================================
   LEO Design Tokens
   Brand: LEO Gold + Charcoal · Typography: Manrope + Inter
   Mobile-first · 8px spacing scale · Container 1200px
   ========================================================================== */

:root {
	/* ── Brand colors (chốt Mio brief §3.1, giữ nguyên 14/05) ─────────── */
	--leo-gold:        #C9A24A;
	--leo-gold-dark:   #8B6F2E;
	--leo-charcoal:    #1F2937;
	--leo-slate:       #475569;
	--leo-cream:       #FAF7F0;
	--leo-gray-light:  #F3F4F6;
	--leo-white:       #FFFFFF;
	--leo-success:     #15803D;
	--leo-info:        #1E40AF;

	/* ── Typography (Mio brief §3.2) ──────────────────────────────────── */
	--leo-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--leo-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--leo-font-size-base: 16px;
	--leo-line-height-base: 1.6;

	/* Fluid type scale */
	--leo-font-size-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
	--leo-font-size-h2: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
	--leo-font-size-h3: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
	--leo-font-size-h4: 1.25rem;
	--leo-font-size-small: 0.875rem;
	--leo-font-size-eyebrow: 0.875rem;

	--leo-font-weight-regular: 400;
	--leo-font-weight-medium:  500;
	--leo-font-weight-bold:    700;
	--leo-font-weight-extra:   800;

	--leo-letter-spacing-tight:  -0.02em;
	--leo-letter-spacing-normal: 0;
	--leo-letter-spacing-wide:   0.05em;
	--leo-letter-spacing-eyebrow: 0.1em;

	/* ── Spacing scale (8px base) ─────────────────────────────────────── */
	--leo-space-0:  0;
	--leo-space-1:  8px;
	--leo-space-2:  16px;
	--leo-space-3:  24px;
	--leo-space-4:  32px;
	--leo-space-5:  48px;
	--leo-space-6:  64px;
	--leo-space-7:  80px;
	--leo-space-8:  96px;
	--leo-space-9:  128px;

	/* Section spacing (Mio brief §3.3) */
	--leo-section-spacing-mobile:  64px;
	--leo-section-spacing-desktop: 96px;

	/* ── Container ────────────────────────────────────────────────────── */
	--leo-container-max:     1200px;
	--leo-container-padding: 24px;

	/* ── Border radius (Mio brief §3.3) ───────────────────────────────── */
	--leo-radius-sm:   4px;
	--leo-radius-md:   8px;   /* button */
	--leo-radius-lg:   12px;  /* card */
	--leo-radius-xl:   16px;
	--leo-radius-full: 9999px;

	/* ── Shadow (subtle corporate, Mio brief §3.3) ────────────────────── */
	--leo-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
	--leo-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
	--leo-shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.12);
	--leo-shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.16);

	/* ── Transition (Mio brief §3.3) ──────────────────────────────────── */
	--leo-transition-fast:  150ms ease;
	--leo-transition-base:  200ms ease;
	--leo-transition-slow:  300ms ease;

	/* ── Z-index scale ────────────────────────────────────────────────── */
	--leo-z-base:     1;
	--leo-z-sticky:   100;
	--leo-z-overlay:  1000;
	--leo-z-modal:    2000;
	--leo-z-tooltip:  3000;

	/* ── Breakpoints (reference, JS use) ──────────────────────────────── */
	--leo-bp-sm:  480px;
	--leo-bp-md:  768px;
	--leo-bp-lg:  1024px;
	--leo-bp-xl:  1440px;
}

/* ── Base typography reset ────────────────────────────────────────────── */
body {
	font-family: var(--leo-font-body);
	font-size: var(--leo-font-size-base);
	line-height: var(--leo-line-height-base);
	color: var(--leo-charcoal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--leo-font-heading);
	font-weight: var(--leo-font-weight-bold);
	line-height: 1.2;
	letter-spacing: var(--leo-letter-spacing-tight);
	color: var(--leo-charcoal);
	margin-block: 0 var(--leo-space-2);
}

h1 { font-size: var(--leo-font-size-h1); font-weight: var(--leo-font-weight-extra); }
h2 { font-size: var(--leo-font-size-h2); }
h3 { font-size: var(--leo-font-size-h3); }
h4 { font-size: var(--leo-font-size-h4); }

p {
	margin-block: 0 var(--leo-space-2);
}

a {
	color: var(--leo-gold-dark);
	text-decoration: none;
	transition: color var(--leo-transition-base);
}

a:hover {
	color: var(--leo-gold);
}

a:focus-visible {
	outline: 2px solid var(--leo-gold);
	outline-offset: 2px;
	color: var(--leo-gold);
}

/* Eyebrow text style (above H1) */
.leo-eyebrow {
	display: block;
	font-family: var(--leo-font-heading);
	font-size: var(--leo-font-size-eyebrow);
	font-weight: var(--leo-font-weight-medium);
	letter-spacing: var(--leo-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--leo-gold-dark);
	margin-bottom: var(--leo-space-1);
}

/* Trust strip (Hero below CTAs) */
.leo-trust-strip {
	font-size: var(--leo-font-size-small);
	color: var(--leo-slate);
	margin-top: var(--leo-space-2);
}