/*
 * RS Gearbox & Differentials, design tokens.
 *
 * Read straight off the live site's own markup (the Searchly-authored HTML
 * embeds captured in discovery/site-capture/_embeds/), so the migrated site is
 * colour-for-colour and metric-for-metric identical to the Wix original.
 */

:root {
	/* Surfaces */
	--gb-black: #0a0a0a;          /* page + header background */
	--gb-black-deep: #050505;     /* hero gradient end */
	--gb-panel: #111111;          /* dark panel inside light sections */
	--gb-light: #f3f3f3;          /* light section background */
	--gb-white: #ffffff;          /* cards */
	--gb-footer: #232323;         /* footer background */

	/* Brand */
	--gb-red: #f33645;
	--gb-red-hover: #e72a3a;
	--gb-red-link: #ff3647;       /* red link on the footer's lighter ground */
	--gb-red-chip: #ff6672;       /* model chip text */
	--gb-blue: #2e65fb;           /* Searchly credit link */

	/* Text on dark */
	--gb-on-dark: #ffffff;
	--gb-on-dark-80: rgba(255, 255, 255, 0.82);
	--gb-on-dark-70: rgba(255, 255, 255, 0.78);
	--gb-on-dark-60: rgba(255, 255, 255, 0.68);
	--gb-on-dark-55: rgba(255, 255, 255, 0.62);
	--gb-on-dark-50: rgba(255, 255, 255, 0.56);
	--gb-on-dark-45: rgba(255, 255, 255, 0.48);

	/* Text on light */
	--gb-on-light: #111111;
	--gb-on-light-mid: #787878;
	--gb-on-light-soft: #8f8f8f;

	/* Hairlines and tints on dark */
	--gb-line: rgba(255, 255, 255, 0.08);
	--gb-line-soft: rgba(255, 255, 255, 0.06);
	--gb-fill: rgba(255, 255, 255, 0.035);
	--gb-fill-strong: rgba(255, 255, 255, 0.05);
	--gb-red-tint: rgba(243, 54, 69, 0.08);
	--gb-red-tint-strong: rgba(243, 54, 69, 0.12);
	--gb-red-edge: rgba(243, 54, 69, 0.18);

	/* Hairline on light */
	--gb-line-light: rgba(17, 17, 17, 0.06);
	--gb-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.04);

	/* Layout */
	/*
	 * The site's content width.
	 *
	 * Read off the live site rather than chosen: every Wix embed renders in an
	 * iframe about 1304px wide, so that is the measure the ported sections were
	 * authored against. 1344 minus the 20px gutters either side gives exactly
	 * that, which is what keeps headings wrapping at the same words they wrap at
	 * on the site we are replacing.
	 */
	--gb-max: 1344px;
	--gb-gutter: 20px;
	--gb-gutter-md: 18px;
	--gb-gutter-sm: 16px;

	/* Radii */
	--gb-r-btn: 12px;
	--gb-r-sm: 14px;
	--gb-r-md: 18px;
	--gb-r-lg: 22px;
	--gb-r-pill: 999px;

	/* Type */
	--gb-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}