/*
 * LittleNest design tokens — extracted from the approved mockup, adjusted for WCAG AA.
 * Text/button colours use darker shades of the mockup pastels (all ≥ 4.5:1).
 */

/* Self-hosted fonts: 2 families, Poppins 600/800 + Nunito variable (one file). */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/nunito-latin-wght-normal.woff2") format("woff2");
}

:root {
	/* Brand — mockup purples */
	--ln-purple-900: #4a0b92;
	--ln-purple-800: #5a0fa8;
	--ln-purple-700: #7a14c8;
	--ln-purple-500: #9d1fd6;
	--ln-violet-600: #6b4fd8;
	--ln-indigo-800: #2e1a8f;
	--ln-indigo-700: #3a12b8;
	--ln-plum-800: #3e2a85;   /* primary button (11.2:1 with white) */

	/* Mockup accents (decor/backgrounds) */
	--ln-pink-500: #ff2d95;
	--ln-pink-300: #ff6fb1;
	--ln-pink-100: #ffe1ef;
	--ln-pink-700: #c8126b;   /* text-safe pink (5.6:1) */
	--ln-sun-500: #ffb800;    /* yellow — dark text only */
	--ln-sun-300: #ffd25a;
	--ln-sun-100: #fff4d6;
	--ln-orange-500: #ff9a1f;
	--ln-orange-700: #b04e00;
	--ln-green-500: #8cd23a;
	--ln-green-300: #9be38e;
	--ln-green-100: #e7f8df;
	--ln-green-700: #2e7d32;
	--ln-sky-500: #29b6f6;
	--ln-sky-300: #8fdbff;
	--ln-sky-100: #dff4fd;
	--ln-blue-600: #2f6fdb;
	--ln-blue-700: #0b6fa8;
	--ln-lavender-100: #efeaff;
	--ln-lavender-200: #e2d9ff;

	/* Neutrals */
	--ln-ink: #2b2645;        /* headings (14:1) */
	--ln-text: #4a4560;       /* body (9:1) */
	--ln-muted: #6b6680;      /* secondary (5.5:1) */
	--ln-line: #ece9f5;
	--ln-bg: #ffffff;
	--ln-bg-soft: #faf8ff;
	--ln-navy: #35325a;       /* footer */
	--ln-error: #b00020;
	--ln-success: #1f7a3a;

	/* Typography */
	--ln-font-head: "Poppins", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
	--ln-font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
	--ln-fs-xs: 0.8125rem;
	--ln-fs-sm: 0.9375rem;
	--ln-fs-base: 1.0625rem;  /* 17px */
	--ln-fs-lead: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
	--ln-fs-h3: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
	--ln-fs-h2: clamp(1.75rem, 2.2vw + 1rem, 2.75rem);
	--ln-fs-h1: clamp(2.375rem, 4.6vw + 1rem, 4.25rem);
	--ln-fs-display: clamp(2.5rem, 5.6vw + 1rem, 5rem);
	--ln-lh: 1.7;

	/* Spacing — 8px scale */
	--ln-s1: 0.5rem;
	--ln-s2: 1rem;
	--ln-s3: 1.5rem;
	--ln-s4: 2rem;
	--ln-s5: 2.5rem;
	--ln-s6: 3rem;
	--ln-s8: 4rem;
	--ln-s10: 5rem;
	--ln-section: clamp(4rem, 9vw, 7.5rem);
	--ln-gutter: clamp(1rem, 3vw, 2rem);
	--ln-container: 1200px;
	--ln-container-narrow: 820px;

	/* Shape */
	--ln-r-sm: 12px;
	--ln-r-md: 20px;
	--ln-r-lg: 32px;
	--ln-r-xl: 48px;
	--ln-r-pill: 999px;
	--ln-r-btn: 16px 24px 16px 22px / 22px 16px 24px 16px; /* hand-drawn button shape */
	--ln-r-squircle: 38% 62% 44% 56% / 46% 40% 60% 54%;
	--ln-r-blob: 62% 38% 54% 46% / 48% 56% 44% 52%;

	/* Depth */
	--ln-shadow-sm: 0 2px 8px rgba(43, 38, 69, 0.06);
	--ln-shadow-md: 0 12px 32px -12px rgba(43, 38, 69, 0.18);
	--ln-shadow-lg: 0 28px 60px -24px rgba(43, 38, 69, 0.28);
	--ln-shadow-btn: 0 6px 0 -1px rgba(43, 38, 69, 0.16);
	--ln-shadow-btn-hover: 0 10px 0 -2px rgba(43, 38, 69, 0.14), 0 18px 30px -12px rgba(62, 42, 133, 0.4);

	/* Motion */
	--ln-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ln-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ln-dur: 0.35s;
	--ln-dur-reveal: 0.8s;

	--ln-header-h: 76px;
}

@media (min-width: 1024px) {
	:root {
		--ln-header-h: 88px;
	}
}