/* tokens.css — design system extracted from designs/homepage/Nuqualis Homepage.dc.html
 * (BUILD 05 §3a.2). Every page in site/ and console/ loads this before its own
 * CSS. Observable values were read from the mockup and confirmed exactly
 * (WORK ORDER 20 §3) — no deviation found:
 *   background #f5ead8, text #201e1d, accent #c67139, display face Caprasimo,
 *   body face Figtree.
 *
 * Do not hand-roll a color, spacing or radius value on a page. Add a token
 * here first if one is missing.
 */

:root {
	/* Color */
	--nq-color-bg:          #f5ead8; /* page background */
	--nq-color-bg-raised:   #ebddc5; /* cards, step panels */
	--nq-color-bg-alt:      #eee7db; /* section bands (trust) */
	--nq-color-bg-inset:    #f9f4ed; /* icon chips on --nq-color-bg-alt */
	--nq-color-bg-pill:     #fff2eb; /* eyebrow pill background */
	--nq-color-text:        #201e1d;
	--nq-color-text-muted:  rgba(32, 30, 29, 0.75);
	--nq-color-text-faint:  rgba(32, 30, 29, 0.55);
	--nq-color-accent:      #c67139;
	--nq-color-accent-hover:#b2622d;
	--nq-color-accent-dark: #8c491a; /* eyebrow text, some icon chips */
	--nq-color-green:       #56633f; /* secondary CTA text, icon chips */
	--nq-color-green-bg:    #f0fae1;
	--nq-color-neutral-chip:#eee7db;
	--nq-color-neutral-ink: #474238;
	--nq-color-border:      rgba(32, 30, 29, 0.16);
	--nq-color-shadow:      rgba(46, 43, 37, 0.16);
	--nq-color-shadow-lg:   rgba(46, 43, 37, 0.22);

	/* Type */
	--nq-font-display: 'Caprasimo', system-ui, sans-serif;
	--nq-font-body:     'Figtree', system-ui, sans-serif;
	--nq-font-mono:     ui-monospace, monospace;

	--nq-text-hero:    52px;
	--nq-text-h2:      34px;
	--nq-text-h3:      23px;
	--nq-text-h4:      19px;
	--nq-text-h5:      18px;
	--nq-text-h6:      16px;
	--nq-text-body:    17px;
	--nq-text-body-sm: 14.5px;
	--nq-text-small:   13.5px;
	--nq-text-eyebrow: 11px;

	--nq-line-tight:  1.08;
	--nq-line-snug:   1.15;
	--nq-line-normal: 1.5;
	--nq-line-loose:  1.6;
	--nq-line-looser: 1.65;

	/* Spacing scale (px) */
	--nq-space-1: 4px;
	--nq-space-2: 6px;
	--nq-space-3: 8px;
	--nq-space-4: 10px;
	--nq-space-5: 12px;
	--nq-space-6: 14px;
	--nq-space-7: 16px;
	--nq-space-8: 20px;
	--nq-space-9: 24px;
	--nq-space-10: 28px;
	--nq-space-11: 32px;
	--nq-space-12: 40px;
	--nq-space-13: 48px;
	--nq-space-14: 56px;
	--nq-space-15: 80px;
	--nq-space-16: 96px;

	/* Radii */
	--nq-radius-sm: 6px;
	--nq-radius-md: 24px;
	--nq-radius-lg: 28px;
	--nq-radius-xl: 32px;
	--nq-radius-pill: 999px;

	/* Shadows */
	--nq-shadow-sm: 0 1px 2px var(--nq-color-shadow);
	--nq-shadow-md: 0 3px 10px var(--nq-color-shadow);
	--nq-shadow-lg: 0 12px 32px var(--nq-color-shadow-lg);

	/* Layout */
	--nq-max-width: 1240px;
	--nq-gutter: 48px;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--nq-color-bg);
	color: var(--nq-color-text);
	font-family: var(--nq-font-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--nq-font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0;
}

a {
	color: var(--nq-color-accent);
	text-decoration: none;
}

a:hover {
	color: var(--nq-color-accent-hover);
}

.nq-container {
	max-width: var(--nq-max-width);
	margin: 0 auto;
	padding-left: var(--nq-gutter);
	padding-right: var(--nq-gutter);
}

.nq-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: var(--nq-space-3);
	background: var(--nq-color-accent);
	color: var(--nq-color-bg);
	font-family: var(--nq-font-display);
	font-size: 15px;
	padding: 14px 26px;
	border-radius: var(--nq-radius-pill);
	box-shadow: var(--nq-shadow-md);
	border: none;
	cursor: pointer;
}

.nq-btn-primary:hover {
	background: var(--nq-color-accent-hover);
	color: var(--nq-color-bg);
}

.nq-eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: var(--nq-text-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nq-color-accent-dark);
	background: var(--nq-color-bg-pill);
	padding: 6px 14px;
	border-radius: var(--nq-radius-pill);
}

.nq-eyebrow--section {
	background: none;
	padding: 0;
	color: var(--nq-color-green);
	margin-bottom: 10px;
}