/**
 * Design tokens — the starting point for a new site, so nobody writes
 * `font-size: 13.6px` on page three and a slightly different one on page four.
 *
 * Built on Open Props (https://open-props.style), a plain-CSS variable library.
 * Two ways to use it:
 *
 *   1. Whole library, no build step:
 *        @import "https://unpkg.com/open-props";
 *      then map the semantic names below onto its raw props.
 *   2. Vendored (recommended for production — no third-party request):
 *        pnpm add open-props
 *        @import "open-props/style";
 *
 * The semantic layer below is what components use. Components never reach for
 * a raw scale value: `.card h3 { font-size: var(--fs-lg) }`, never
 * `font-size: 1.25rem`.
 *
 * Enforce it with stylelint.config.js from this same directory.
 */

:root {
	/* ---- Type. Eight steps, tight at the bottom, wider as it climbs — the
     shape Tailwind (12/14/16/18/20/24/30/36) and Carbon both use. Fixed
     increments are not an industry pattern; ratios are. Nothing between the
     steps: if a size feels wrong it belongs in a different step. ---- */
	--fs-xs: 0.75rem; /* 12 — meta, table headers, chips, timestamps */
	--fs-sm: 0.875rem; /* 14 — UI body: tables, menus, buttons, dense text */
	--fs-md: 1rem; /* 16 — reading body, prose */
	--fs-lg: 1.25rem; /* 20 — card and panel headings */
	--fs-xl: 1.5rem; /* 24 — page headings, stat numbers */
	--fs-2xl: 2rem; /* 32 — section headings */
	--fs-3xl: 2.5rem; /* 40 — price, hero numbers */
	--fs-4xl: 3.75rem; /* 60 — hero ceiling, only as a clamp() upper bound */

	/* ---- Spacing is a GRID, not a token list: every padding/margin/gap is a
     multiple of 4px, halved to 2px below 8px (Tailwind: 0.5=2, 1=4, 1.5=6,
     2=8, 3=12…). 1.25rem is legal because it lands on the grid, not because
     someone named it. These name the common rhythm. ---- */
	--sp-1: 0.25rem; /* 4 */
	--sp-2: 0.5rem; /* 8 */
	--sp-3: 0.75rem; /* 12 */
	--sp-4: 1rem; /* 16 */
	--sp-5: 1.5rem; /* 24 */
	--sp-6: 2rem; /* 32 */
	--sp-7: 3rem; /* 48 */

	/* ---- Controls: three heights, nothing in between. ---- */
	--ctl-sm: 32px; /* dense chrome: toolbars, in-table actions */
	--ctl-md: 40px; /* form inputs, standard action buttons */
	--ctl-lg: 48px; /* hero inputs, marketing CTAs */

	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 18px;
	--radius-pill: 999px; /* 50% stays literal — a circle is not a step */

	/* ---- Measure. ONE column width for the whole site — header, text, cards
     and footer all begin AND end at the same place. Two widths alternating
     down a page read as the layout changing its mind, however well the rule
     behind the second width is documented; a shorter cap for running text was
     tried and read exactly that way. ---- */
	--w-content: 56rem; /* the column: everything */

	/* ---- Colour. A document tool is read for a long time and trusted with
     someone's file, so it is light, quiet, and uses one accent. Every colour a
     component uses is named here; a literal earns a token when a SECOND place
     needs it. ---- */
	--bg: #fbfbfd;
	--bg-elevated: #ffffff;
	--bg-soft: #f4f5f8;
	--bg-veil: rgb(251 251 253 / 88%); /* sticky header over scrolling content */
	--border: rgb(16 20 34 / 9%);
	--border-strong: rgb(16 20 34 / 16%);
	--text: #14182b;
	--text-muted: #565d75;
	--text-dim: #838aa1;
	--accent: #2f5bd7;
	--accent-strong: #24479f; /* hover */
	--accent-soft: rgb(47 91 215 / 8%); /* tinted background */
	--accent-ink: #ffffff; /* text on --accent */
	--focus-ring: rgb(47 91 215 / 40%);
	--mark-was: rgb(
		214 158 0 /
		26%
	); /* over the old text: this is what changes */
	--mark-was-solid: #a8760a;
	--mark: rgb(18 115 90 / 20%); /* over the new text: this is what it became */
	--mark-solid: #12735a; /* the same, opaque, for a legend swatch */
	--ok: #12735a;
	--ok-soft: rgb(18 115 90 / 10%);
	--danger: #b3261e;
	--danger-soft: rgb(179 38 30 / 8%);
	--warn: #8a5300;
	--warn-soft: rgb(138 83 0 / 10%);
	--shadow: 0 1px 2px rgb(16 20 34 / 6%), 0 12px 32px rgb(16 20 34 / 6%);
	--shadow-pop: 0 8px 24px rgb(16 20 34 / 10%);
}

/**
 * Breakpoints cannot be custom properties: `@media (max-width: var(--bp))` is
 * dropped by the browser, because media conditions are evaluated before custom
 * properties resolve. Pick three, write them literally, and let stylelint's
 * media-feature-name-value-allowed-list keep a fourth from appearing.
 *
 *   560px  small phone
 *   720px  sidebar becomes a drawer / single column
 *   900px  multi-column grids collapse
 *
 * With a build step, PostCSS `@custom-media` gives you named breakpoints.
 */