/* London Hair Replacement design tokens. All colour, type and space live here. */
:root {
	/* Palette: deep navy and white, sea-green for action, warm gold only for stars and the hairline. */
	--c-ink: #0E1620;
	--c-ink-2: #172231;
	--c-ink-3: #1F2D3D;
	--c-white: #FFFFFF;
	--c-cloud: #F2F5F8;
	--c-slate: #566573;
	--c-line: #DCE2E8;
	--c-mist: #AEBBC7;
	--c-line-dark: #2B3A4B;
	--c-accent: #1F7A75;
	--c-accent-2: #176560;
	--c-accent-soft: #DDF0EE;
	--c-wa: #25D366;
	--c-wa-2: #1EBE5A;
	--c-gold: #E2B04A;
	--c-error: #D9534F;
	--c-error-dark: #F09A96;

	/* Roles */
	--ink: var(--c-ink);
	--ink-2: var(--c-slate);
	--bg: var(--c-white);
	--bg-2: var(--c-cloud);
	--rule: var(--c-line);
	--accent: var(--c-accent);
	--accent-2: var(--c-accent-2);
	--on-accent: var(--c-white);

	/* Type: Manrope only, weight carries hierarchy */
	--font: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-head: var(--font);
	--fs-0: 0.875rem;
	--fs-1: 1rem;
	--fs-2: 1.125rem;
	--fs-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--fs-4: clamp(1.75rem, 1.25rem + 2.2vw, 2.9rem);
	--fs-5: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
	--lh-body: 1.6;

	/* Space */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 1rem;
	--s-4: 1.5rem;
	--s-5: 2rem;
	--s-6: 3rem;
	--s-7: 4.5rem;
	--s-8: 6.5rem;

	/* Layout */
	--w-header: 1600px;
	--w-content: 1200px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--radius: 8px;
	--radius-lg: 18px;
	--btn-radius: 999px;
	--portrait-w: clamp(220px, 21vw, 300px);
	--header-h: 84px;

	--ease: cubic-bezier(.2,.7,.2,1);
	--shadow: 0 18px 50px rgba(14,22,32,.12);
}

/* Dark sections flip the roles; components read roles, never palette. */
.is-dark {
	--ink: var(--c-white);
	--ink-2: var(--c-mist);
	--bg: var(--c-ink);
	--bg-2: var(--c-ink-2);
	--rule: var(--c-line-dark);
	--accent: var(--c-white);
	--accent-2: var(--c-cloud);
	--on-accent: var(--c-ink);
	color: var(--ink);
	background: var(--bg);
}