/* ============================================================================
   Demand Wolf — design tokens
   "The Operator's Edition" (Claude Design handoff, 2026-06): warm cream/bone
   paper tones, near-black ink, one red signal color, zero border radius,
   hard offset shadows, mono "spec sheet" annotations.
   All other CSS should consume these.
   ============================================================================ */

/* --- Self-hosted fonts ------------------------------------------------------
   Files live in /assets/fonts/. Naming: <family>-<weight>.woff2 (lowercase,
   hyphens; italics get an -italic- infix). Latin subsets from Google Fonts.
   font-display: swap keeps text visible during the font swap; no FOIT.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Space Grotesk";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
	font-family: "Fraunces";
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/fraunces-italic-400.woff2") format("woff2");
}
@font-face {
	font-family: "Fraunces";
	font-weight: 500;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/fraunces-italic-500.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
	font-family: "DM Mono";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "DM Mono";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/dm-mono-500.woff2") format("woff2");
}

:root {
	/* ---- Color (d4Tokens) ---- */
	--cream: #ece5d3;       /* default section bg; light text on ink */
	--cream-deep: #ddd3ba;  /* secondary text on dark; muted light surfaces */
	--bone: #f4efe0;        /* hero + cases bg; card faces; nav */
	--ink: #0b0b0a;         /* primary text; dark sections; buttons; borders */
	--ink-soft: #1a1a18;    /* hairlines on dark surfaces */
	--ink-mid: #3d3830;     /* body text on light surfaces */
	--muted: #7a715f;       /* tertiary/mono annotations on light */
	--dim: #a89f8c;         /* quietest text on dark */
	--signal: #c9412e;      /* THE accent: CTAs, tags, strikethrough, CTA bg */
	--signal-deep: #9a2e1f; /* darker red — hover states */
	--ember: #d89545;       /* warm secondary accent */
	--line: #d0c6ae;        /* hairline borders on light */
	--line-soft: #e0d8c0;   /* softer hairlines on light */

	/* Special alphas */
	--nav-bg: rgba(244, 239, 224, 0.92);
	--hairline-on-dark: rgba(236, 229, 211, 0.14);
	--grid-line: rgba(11, 11, 10, 0.045);

	/* Semantic aliases (interior pages + shared components consume these) */
	--text-strong: var(--ink);
	--text-body: var(--ink-mid);
	--text-soft: var(--muted);
	--surface-page: var(--cream);
	--surface-card: var(--bone);
	--color-focus: var(--signal);

	/* ---- Type families ---- */
	--font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
	--font-serif: "Fraunces", "Instrument Serif", georgia, serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace;

	/* ---- Type scale ----
	   Desktop spec sizes with fluid clamps down to the ≤840px spec. */
	--fs-hero: clamp(44px, 0.75rem + 9.6vw, 132px);     /* hero h1: 132 → clamp(44,12.5vw,60) */
	--fs-h2-lg: clamp(34px, 0.5rem + 6.3vw, 88px);      /* teardown h2 */
	--fs-h2: clamp(34px, 0.5rem + 5.7vw, 80px);         /* section h2 */
	--fs-h2-cta: clamp(40px, 0.5rem + 10vw, 140px);     /* CTA h2 */
	--fs-h2-faq: clamp(34px, 0.5rem + 5vw, 72px);       /* FAQ h2 */
	--fs-quote: clamp(28px, 1rem + 2.8vw, 56px);        /* pull quote */
	--fs-lead: clamp(17px, 1rem + 0.3vw, 21px);

	--fs-body: 1rem;        /* 16 */
	--fs-small: 0.875rem;   /* 14 */
	--fs-caption: 0.8125rem;/* 13 */

	/* ---- Spacing scale (1 = 4px) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* ---- Layout ---- */
	--wrap-max: 1360px;
	--wrap-narrow: 1080px;
	--section-pad: clamp(72px, 4rem + 4vw, 120px);
	--section-pad-x: clamp(20px, 1rem + 1.5vw, 40px);

	/* ---- Geometry ----
	   Radius 0 everywhere (the design's one exception, 99px status dots,
	   is set locally). Hard offset shadows only — never blurred. */
	--radius: 0;
	--shadow-hard: 12px 12px 0 var(--ink);
	--shadow-hard-sm: 8px 8px 0 var(--ink);
	--border-structural: 1.5px solid var(--ink);

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast: 150ms;
	--dur-base: 200ms;
	--dur-reveal: 750ms;
}