/**
 * The design language every widget in this plugin is drawn from.
 *
 * These were read off the reference site rather than invented: the easing curve
 * is theirs exactly, the type sizes and the greens are the ones their own
 * stylesheet uses, and the pill and card radii are theirs. The two widgets
 * built from that site — the video hero and the feature tabs — used them
 * directly; everything older had its own numbers, so nine widgets sat beside
 * two and looked like a different product.
 *
 * Every widget's own variables now *default* to these. A widget keeps its own
 * controls and its own names — nothing here changes what an editor can set —
 * but left alone it comes out of the same box as the rest.
 *
 * Loaded before every widget stylesheet, and each of those still carries the
 * literal as a fallback: a token that never arrives must not take a rule down
 * with it, because an unset custom property does not fall back to a default,
 * it makes the whole declaration invalid.
 */

:root {
	/* --- Movement ---------------------------------------------------------
	 * One curve, theirs: leaves fast, lands slowly. Four different easings
	 * across nine widgets is what made them feel like separate things even
	 * when the colours matched.
	 */
	--jmgw-ease: cubic-bezier(0.475, 0.425, 0, 0.995);

	--jmgw-quick: 0.3s;
	--jmgw-move: 0.5s;
	--jmgw-settle: 0.75s;

	/* --- Ink and paper ---------------------------------------------------- */
	--jmgw-ink: #0b1114;
	--jmgw-paper: #ffffff;

	/* Their section green, and the card that sits on it. */
	--jmgw-deep: #155e6b;
	--jmgw-panel: #0f7183;

	/* On a dark section: the line round a pill, and text that is not shouting. */
	--jmgw-rule-on-dark: rgba(255, 255, 255, 0.55);
	--jmgw-muted-on-dark: rgba(255, 255, 255, 0.75);

	/* On a light section. */
	--jmgw-rule: #e2e5ea;
	--jmgw-muted: #5b6472;
	/* A line or a dot that is present but not yet the point. */
	--jmgw-faint: #9aa3ae;

	/* The accent every widget reaches for. Change this one line and the whole
	   set follows: the timeline fill, the path, the numbers, the buttons. */
	--jmgw-accent: #0f7183;

	/* Kept separate and kept red, because an error drawn in the brand colour
	   stops reading as an error. */
	--jmgw-alert: #c1122b;

	/* --- Shape ------------------------------------------------------------ */
	--jmgw-radius-card: 12px;
	--jmgw-radius-btn: 30px;
	--jmgw-radius-pill: 999px;

	/* --- Type -------------------------------------------------------------
	 * Their scale. Nothing here sets a family: the theme's own font is the
	 * right one, and a plugin that imposes a typeface on a site it was
	 * dropped into is a plugin somebody removes.
	 */
	--jmgw-t-display: 52px;
	--jmgw-t-section: 46px;
	--jmgw-t-card: 36px;
	--jmgw-t-sub: 24px;
	--jmgw-t-lead: 20px;
	--jmgw-t-body: 17px;
	--jmgw-t-small: 15px;
	--jmgw-t-tiny: 13px;
	/* The line above a heading, set small and wide. */
	--jmgw-t-eyebrow: 12px;

	--jmgw-w-semi: 600;
	--jmgw-w-med: 500;

	--jmgw-lh-tight: 1.15;
	--jmgw-lh-heading: 1.2;
	--jmgw-lh-body: 1.5;

	/* --- The page --------------------------------------------------------- */
	--jmgw-page: 1216px;
	--jmgw-section-y: 96px;
	--jmgw-section-x: 20px;
}