/*
 * Design tokens. A brand or style change should only touch this file.
 * Values taken from the Claude Design draft "Design v1" (desktop 1440 px + mobile 390 px).
 */
:root {
	/* Colour */
	--sc-ink: #111111;
	--sc-ink-2: #333333;     /* body text on white and sand */
	--sc-ink-3: #58595b;     /* secondary text, inactive links */
	--sc-ink-4: #666666;     /* small labels (dt, file type) */
	--sc-paper: #ffffff;
	--sc-sand: #f2eee9;
	--sc-sand-2: #faf8f5;    /* download rows inside the phone card */
	--sc-line: #e5e5e5;      /* dividers */
	--sc-line-2: #d6d6d6;    /* FAQ rules, sub-nav divider */
	--sc-line-sand: #d9d1c7; /* divider on sand */
	--sc-card-line: #dcdcdc; /* card border */
	--sc-accent: #eb0a1e;
	--sc-accent-hover: #c40818;
	--sc-accent-ink: #ffffff;
	--sc-dark: #111111;
	--sc-dark-ink: #ffffff;
	--sc-note: #5c534b;      /* footnotes */

	/* Type */
	--sc-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sc-font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
	--sc-display-case: uppercase;

	/* Phone sizes; desktop sizes are set in the ≥ 900 px block of product.css */
	--sc-fs-hero: 4rem;      /* 64 → 112 px */
	--sc-fs-h2: 2.25rem;     /* 36 → 48 px */
	--sc-fs-feature: 1.625rem; /* 26 → 48 px */
	--sc-fs-lead: 1.0625rem; /* 17 → 19 px */
	--sc-fs-body: 1rem;
	--sc-fs-small: .8125rem;

	/* Space and layout */
	--sc-max: 1200px;
	--sc-gutter: 20px;       /* 20 → 48 px */
	--sc-section: 56px;      /* 56 → 96 px */
	--sc-radius: 16px;
	--sc-radius-sm: 12px;
	--sc-radius-pill: 999px;

	/* Sticky elements. product.js measures the real site header and keeps --sc-top in sync
	   (also while the header hides on scroll); these are the starting values. */
	--sc-header-h: 60px;     /* 60 → 76 px */
	--sc-subnav-h: 110px;    /* phones: 60 px row + 1 + 48 px links + 1 px border; desktop: 56 px */
}

@media (min-width: 900px) {
	:root {
		--sc-fs-hero: 7rem;
		--sc-fs-h2: 3rem;
		--sc-fs-feature: 3rem;
		--sc-fs-lead: 1.1875rem;
		--sc-gutter: 48px;
		--sc-section: 96px;
		--sc-header-h: 76px;
		--sc-subnav-h: 56px;
	}
}