/* CHIP — Design tokens
 * Canonical brand variables. Mirrors theme.json so PHP/section CSS and the
 * block editor share one source of truth. Screen-design aliases are mapped at
 * the bottom so extracted pixel-match CSS can be dropped in with minimal edits.
 */

:root {
	/* ---- Cyan (primary) ---- */
	--chip-cyan-050: #EFF9FC;
	--chip-cyan-100: #DCF1F8;
	--chip-cyan-200: #B7E4F1;
	--chip-cyan-400: #43B7DA;
	--chip-cyan-500: #16A3CC; /* PRIMARY */
	--chip-cyan-600: #0A7FA3;
	--chip-cyan-700: #075E7A;

	/* ---- Deep Sea ---- */
	--chip-sea-600: #175265;
	--chip-sea-700: #103A4C;
	--chip-sea-800: #0C2A38;
	--chip-sea-900: #062430;

	/* ---- Warmth + growth + pop ---- */
	--chip-amber-100: #FBEFD6;
	--chip-amber-500: #E7B65C;
	--chip-green-100: #E2F4EC;
	--chip-green-500: #1F9E6B;
	--chip-coral-100: #FBE3D9;
	--chip-coral-500: #E0734A;
	--chip-magenta-500: #E741AD; /* "Get Matched" pill / archetype accent */
	--chip-magenta-700: #C50D5E; /* primary-button hover (from design) */
	--chip-magenta-100: #FCE8F5;

	/* ---- Neutrals (warm-tinted, never pure gray) ---- */
	--chip-ink: #13262D;
	--chip-slate: #42565D;
	--chip-muted: #74858B;
	--chip-line: #E4E9E8;
	--chip-cloud: #F5F7F6;
	--chip-cream: #F8F6F1;
	--chip-sand-bg: #F7F3EC; /* page background on the live design */
	--chip-white: #FFFFFF;
	--chip-border: #D3DAD9;

	/* ---- Typography ---- */
	--chip-font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--chip-font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--chip-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--chip-fs-display: clamp(2.75rem, 1.8rem + 4.5vw, 4rem);   /* 44 → 64 */
	--chip-fs-h1: clamp(2.25rem, 1.6rem + 3vw, 2.75rem);       /* 36 → 44 */
	--chip-fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2rem);          /* 28 → 32 */
	--chip-fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.5rem);        /* 22 → 24 */
	--chip-fs-body-l: 1.1875rem;  /* 19 */
	--chip-fs-body: 1.0625rem;    /* 17 */
	--chip-fs-small: 0.875rem;    /* 14 */
	--chip-fs-eyebrow: 0.75rem;   /* 12 label */

	--chip-lh-tight: 1.08;
	--chip-lh-snug: 1.25;
	--chip-lh-body: 1.6;
	--chip-ls-display: -0.035em;
	--chip-ls-h1: -0.03em;
	--chip-ls-h2: -0.02em;
	--chip-ls-eyebrow: 0.14em;

	/* ---- Spacing scale ---- */
	--chip-space-xs: 0.5rem;
	--chip-space-s: 1rem;
	--chip-space-m: 1.5rem;
	--chip-space-l: 2.5rem;
	--chip-space-xl: 4rem;
	--chip-space-2xl: 6rem;
	--chip-space-3xl: 8rem;

	/* ---- Layout ---- */
	--chip-content: 1200px;
	--chip-wide: 1320px;
	--chip-gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* ---- Radius + elevation ---- */
	--chip-radius-s: 8px;
	--chip-radius-m: 14px;
	--chip-radius-l: 24px;
	--chip-radius-pill: 999px;
	--chip-shadow-card: 0 1px 2px rgba(12, 42, 56, 0.04), 0 8px 24px rgba(12, 42, 56, 0.06);
	--chip-shadow-raised: 0 12px 40px rgba(12, 42, 56, 0.12);

	/* ---- Icons (SVG masks) ---- */
	--chip-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.6L6.5 12.3l1.4-1.4 2.9 2.9 5.3-5.3 1.4 1.4-6.7 6.7z'/%3E%3C/svg%3E");

	/* Hand-drawn brand underline (amber). Stretches to the emphasized word. */
	--chip-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,11 C55,4 150,5 197,9' fill='none' stroke='%23E7B65C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");

	/* ---- Motion ---- */
	--chip-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--chip-dur: 0.25s;

	/* ============================================================
	 * Screen-design aliases — match the names used in the extracted
	 * home.css so pixel-match CSS can be pasted with little editing.
	 * ============================================================ */
	--navy: var(--chip-sea-800);
	--navy-d: var(--chip-sea-900);
	--navy-deep: var(--chip-sea-900);
	--teal: var(--chip-cyan-500);
	--teal-m: var(--chip-cyan-400);
	--teal-l: var(--chip-cyan-200);
	--teal-bg: var(--chip-cyan-050);
	--pink: var(--chip-magenta-500);
	--pink-light: var(--chip-magenta-100);
	--green: var(--chip-green-500);
	--yellow: var(--chip-amber-500);
	--expanding-accent: var(--chip-amber-500);
	--gray-light: var(--chip-sand-bg);
	--gray-l: var(--chip-sand-bg);
	--gray-mid: var(--chip-line);
	--gray-m: var(--chip-line);
	--gray-border: var(--chip-border);
	--muted: var(--chip-muted);
	--text: var(--chip-sea-800);
	--text-muted: var(--chip-muted);
	--text-light: #9DACB1;
	--white: var(--chip-white);
	--serif: var(--chip-font-display);
	--sans: var(--chip-font-body);
}