/**
 * Design tokens — source of truth is design/knit-design-system.html.
 * Keep the two in sync; that file is the reference for sign-off, this
 * one is what actually ships.
 */

@font-face {
	font-family: 'Sora';
	src: url('../fonts/sora-variable.ttf') format('truetype-variations');
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-variable.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Neutral gray ramp — was the coral-red brand accent, remapped
	   2026-08-27 per team sign-off on the "mono4" direction (see
	   design/palette-preview tool history): reduce red sitewide, keep
	   it only on the literal primary CTA (--cta below). Values adopted
	   from the product's Figma design-token system (colors.neutral.
	   2/5/7/8), not invented. Variable names kept as --coral-* rather
	   than renamed — ~35 usages across components.css reference them
	   directly (badges, decorative mockup gradients, illustrative
	   icons) and are meant to inherit this remap automatically; a
	   rename would mean touching every one of those for no functional
	   difference. */
	--coral-700: #00112B;
	--coral-600: #212D3F;
	--coral-500: #838992;
	--coral-100: #F5F6F9;

	/* Logo-mark orange — updated to the product's colors.orange.1/3
	   in the same pass. */
	--orange-500: #FF9E2C;
	--orange-100: #FFF3E4;

	/* Secondary, product-differentiator colors — each of the three
	   product cards gets one of these as its own accent, matching the
	   live site's pattern (teal=Unified API, amber=MCP Servers). */
	--teal-500: #02D2A0;
	--teal-400: #4FE0C4;
	--teal-100: #DCFBF3;

	--navy-900: #00112B;
	--navy-800: #0B1E38;
	--navy-700: #1D3350;
	--navy-500: #4C5E78;
	--navy-300: #93A2B8;
	--navy-150: #DDE3EC;
	--navy-100: #EEF1F6;

	--paper: #F7F9FA;
	--white: #FFFFFF;

	--amber-500: #FBB040;
	--amber-100: #FEF0DC;
	--green-500: #1E9E6B;
	--green-100: #E1F5EC;

	--ink: var(--navy-900);
	--ink-soft: var(--navy-500);
	--border: var(--navy-150);
	--accent: var(--coral-600);
	--accent-strong: var(--coral-700);
	--accent-soft: var(--coral-100);
	/* Three-stop gradient technique borrowed from Chargebee's CTA
	   treatment — built from our own verified coral/orange hues, not
	   theirs, so the brand color stays accurate while adopting the
	   visual device. */
	--accent-gradient: linear-gradient(90deg, var(--coral-700), var(--coral-600) 50%, var(--orange-500));

	/* Dedicated CTA red — deliberately separate from --accent* above
	   (which now flows from the neutral gray scale, same as everything
	   else that reads --coral-* directly). Keeps the literal primary
	   button/demo-request CTA the only red thing on the page. Adopted
	   from the product's Figma colors.brand.primary (#ff4a55); flat
	   fill rather than a gradient, since that system has no gradient
	   concept. */
	--cta: #FF4A55;
	--cta-hover: #DC2B2B;

	/* Dedicated feedback/error red (product's colors.red.4) — kept
	   apart from --cta so a genuine validation error reads as its own
	   distinct signal, not "is this the brand button or a warning". */
	--danger: #DC2B2B;

	--font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

	--shadow-sm: 0 1px 2px rgba(11, 21, 38, 0.06);
	--shadow-md: 0 4px 16px rgba(11, 21, 38, 0.08);
	--shadow-lg: 0 12px 32px rgba(11, 21, 38, 0.12);
	/* Soft inset shadow — Chargebee's signature "pressed glass" card
	   depth, used instead of a hard drop-shadow. */
	--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -12px 24px -12px rgba(0, 17, 43, 0.06);
	--radius: 10px;
	--radius-card: 22px;
	--radius-pill: 999px;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;
	--space-2xl: 64px;

	--container-width: 1280px;
}

/**
 * Dark mode intentionally not supported — the site ships one light
 * design (matches production). A partial token override here
 * previously caused a broken half-dark render on devices with system
 * dark mode on (some tokens flipped, e.g. --paper/--ink, while others
 * like --navy-900/--coral-600 didn't, since most component CSS
 * references the raw color tokens directly rather than exclusively
 * through the semantic --ink/--accent ones). Removed 2026-08-26.
 */