/*
 * NTWOOD design tokens — Style A "Rừng Sương"
 *
 * Ported verbatim from prototype/a-rung-suong/style.css. The prototype is the
 * signed-off design; these values are not to be "improved" without re-measuring
 * contrast, because four of them were chosen by measurement rather than by eye.
 *
 * ── CONTRAST, MEASURED ──
 *
 *   --mist on --ink ................ 16.1:1
 *   --mist-dim on --ink ............  7.4:1
 *   --mist-faint on --ink ..........  4.6:1  labels only, >= 12px uppercase
 *   --green on --ink ...............  6.05:1  accent TYPE, icons, hairlines
 *   white on --green-btn ...........  4.97:1  filled buttons
 *   white on --green-btn-hot .......  5.50:1
 *   --wood on --ink ................  6.5:1
 *
 * ── NEVER PUT WHITE TEXT ON --green ──
 *
 * It measures 3.15:1 and fails AA at every size. `--green` is for type ON the
 * dark canvas, hairlines and icons. Anything that CARRIES white text uses
 * `--green-btn`. The two greens look nearly identical side by side, which is
 * exactly why this is written down: swapping one for the other is invisible in
 * review and fails an audit.
 *
 * Both greens are sampled from the logo's infinity mark. Round 1 shipped the
 * logo's bright lime (#8BE22A) and the client rejected it as glaring on ink.
 *
 * ── THE THEME OWNS THIS FILE ──
 *
 * build.sh copies it to newtechwood-widgets/assets/css/fallback/tokens.css so
 * the widgets keep their design system under a different theme. One source,
 * never two hand-maintained copies. Both sides register the handle `ntw-tokens`
 * behind a `wp_style_is( ..., 'registered' )` guard, so it loads once.
 */
:root {
	/* surfaces — the ink ladder. The canvas is always one of these three. */
	--ink: #0D110E;
	--ink-2: #131914;
	--ink-3: #1A221B;

	/* type on those surfaces */
	--mist: #E9EDE6;
	--mist-dim: rgba(233, 237, 230, .66);
	--mist-faint: rgba(233, 237, 230, .52);

	/* the single accent, in its two jobs */
	--green: #24A800;        /* type, icons, hairlines — NOT a background for white text */
	--green-btn: #178200;    /* filled surfaces that carry white text */
	--green-btn-hot: #157A00;

	/* depth without a new hue */
	--wood: #C98A4B;
	--line: rgba(233, 237, 230, .12);
	--line-2: rgba(233, 237, 230, .22);

	/*
	 * One family, two weights: display 500, body 400. Be Vietnam Pro ships the
	 * `vietnamese` subset, which is why it was chosen.
	 *
	 * NO ITALIC ANYWHERE. The italic axis is not loaded, so `font-style: italic`
	 * makes the browser slant the roman glyphs — it looks like a rendering fault,
	 * not like emphasis. Emphasis is colour: `em` renders green, upright.
	 */
	--f-display: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* rhythm */
	--pad: clamp(20px, 5vw, 72px);
	--wrap: 1360px;
	--r: 14px;

	--ease: cubic-bezier(.2, .7, .2, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);

	/* the fixed header's height, so scroll-padding and hero padding agree */
	--hdr-h: 88px;
}