/* ==========================================================================
   SaaS NG — design tokens
   The single source of truth for colour, type, space, radius and shadow.
   Never hard-code a hex value, a font size or a pixel gap in a component.
   Contrast ratios are measured; see site_reference/palette.md.
   ========================================================================== */

:root {
	/* --- Colour: core ---------------------------------------------------- */
	--cream: #fdfbf7;
	--ink: #1f1b16;
	--amber: #d97706;
	--espresso: #422006;

	/* --- Colour: derived ------------------------------------------------- */
	--accent-ink: #9a4c07; /* amber darkened for links and small text, 5.96:1 */
	--accent-hover: #c26a05; /* amber darkened one step, for button hover      */
	--ink-muted: #5a534b; /* secondary prose, 7.33:1 on cream                */
	--surface: #f7f2e9; /* cards and panels                                */
	--surface-sunk: #f3ece0; /* alternating section bands                       */
	--line: #e5ddd0; /* hairline dividers, decorative only              */
	--line-strong: #d6ccbb; /* visible card edges                              */
	--sand: #f5d9a8; /* light amber tint, for use on espresso           */
	--grey-before: #7a756f; /* the "before" state in illustrations only        */

	/* --- Colour: semantic ------------------------------------------------
	   On the shipped palette these all resolve to the four core colours, so
	   they look redundant. They exist because those four coincide only on a
	   light ground: --espresso is simultaneously the text ON the accent fill,
	   a strong foreground ON the page, and a dark panel BACKGROUND. On a dark
	   theme the first and third stay dark while the second must turn light,
	   and no single token can do both. Components use these names; only a
	   theme decides what they point at. */
	--page-bg: var(--cream);
	--text: var(--ink);
	--text-muted: var(--ink-muted);
	--link: var(--accent-ink);
	--on-accent: var(--espresso); /* text sitting on the accent fill        */
	--ink-strong: var(--espresso); /* strong foreground: ghost btn, a:hover  */
	--panel: var(--espresso); /* dark bands: footer, CTA, section--dark */
	--panel-ink: var(--cream); /* text sitting on those bands            */
	--header-bg: rgb(253 251 247 / 92%); /* sticky header; keep ~92% alpha  */
	--focus-ring: var(--ink-strong);

	/* --- Type ------------------------------------------------------------
	   System stack only: no webfont request, instant first paint, and it
	   looks native on every platform. */
	--font-sans:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-mono:
		ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* Fluid scale, 320px → 1280px viewport. */
	--text-xs: 0.8125rem; /* 13px  — legal fine print            */
	--text-sm: 0.9375rem; /* 15px  — labels, captions            */
	--text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16–17px body  */
	--text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); /* 18–20px lead  */
	--text-xl: clamp(1.3125rem, 1.24rem + 0.36vw, 1.5rem); /* 21–24px       */
	--text-2xl: clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem); /* 24–30px h3     */
	--text-3xl: clamp(1.875rem, 1.66rem + 1.05vw, 2.5rem); /* 30–40px h2    */
	--text-4xl: clamp(2.25rem, 1.79rem + 2.3vw, 3.5rem); /* 36–56px h1      */

	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.6;
	--leading-relaxed: 1.7;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.08em;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--measure: 65ch; /* prose line length cap */

	/* --- Space: 4px base ------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 4rem;
	--space-10: 5rem;
	--space-11: 6rem;
	--space-12: 8rem;

	/* Vertical rhythm between major page sections. */
	--section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

	/* --- Layout ----------------------------------------------------------- */
	--container: 72rem; /* 1152px — the standard content width */
	--container-narrow: 48rem; /* 768px  — legal pages, long prose    */
	--gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);

	/* --- Radius: generous, to carry the warm direction -------------------- */
	--radius-sm: 0.375rem;
	--radius-md: 0.625rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-pill: 999px;

	/* --- Shadow: warm-tinted, never neutral grey -------------------------- */
	--shadow-sm: 0 1px 2px rgb(66 32 6 / 6%), 0 1px 3px rgb(66 32 6 / 5%);
	--shadow-md: 0 2px 4px rgb(66 32 6 / 5%), 0 6px 16px rgb(66 32 6 / 7%);
	--shadow-lg: 0 4px 8px rgb(66 32 6 / 5%), 0 16px 36px rgb(66 32 6 / 10%);

	/* --- Motion ----------------------------------------------------------- */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--duration-fast: 120ms;
	--duration-base: 220ms;
	--duration-slow: 480ms;

	/* --- Focus ------------------------------------------------------------ */
	--focus-width: 2px;
	--focus-offset: 2px;
}

/* The site is intentionally light-only. The cream identity is the thing people
   remember, and a dark theme would dilute it on a site most visitors see once.
   Documented here so the omission reads as a decision, not an oversight. */