/* ============================================================
   Transform Pilot — shared design system : TOKENS
   Extracted verbatim from the approved page 41848 (tp-outcome-prototype).
   Everything is scoped under .tp-ds so it can never leak to other
   templates, the header, or the footer.
   Bright electric blue (#1769FF) is deliberately absent — light-surface
   accents are teal, dark-surface accents are cyan.
   ============================================================ */
.tp-ds {
	/* palette */
	--tp-navy: #03162C;
	--tp-navy-secondary: #071B34;
	--tp-teal: #1F7A8C;
	--tp-teal-deep: #176571;
	--tp-cyan: #35C2DA;
	--tp-bg-light: #F4F7FA;
	--tp-bg-white: #FFFFFF;
	--tp-border: #DDE5EC;
	--tp-text: #07172D;
	--tp-text-secondary: #36475A;
	--tp-text-muted: #66788C;
	--tp-white: #FFFFFF;

	/* roles — dark surfaces */
	--tp-on-dark: #FFFFFF;
	--tp-on-dark-muted: #BACADB;
	--tp-on-dark-faint: #93A8BE;
	--tp-accent-dark: var(--tp-cyan);
	--tp-hairline-dark: rgba(255, 255, 255, 0.16);

	/* roles — light surfaces */
	--tp-on-light: var(--tp-text);
	--tp-on-light-strong: var(--tp-text-secondary);
	--tp-accent-light: var(--tp-teal);
	--tp-link: var(--tp-teal);
	--tp-link-hover: var(--tp-teal-deep);
	--tp-control: var(--tp-teal);
	--tp-control-hover: var(--tp-teal-deep);
	--tp-focus: var(--tp-teal-deep);

	/* grid — authoritative site width read from Elementor kit 7 */
	--tp-content-width: 1300px;
	--tp-gutter: 40px;

	/* radii + elevation — restrained */
	--tp-radius: 4px;
	--tp-radius-panel: 6px;

	box-sizing: border-box;
	color: var(--tp-text);
	font-family: inherit;
	line-height: 1.6;
	text-align: left;
}

.tp-ds *,
.tp-ds *::before,
.tp-ds *::after {
	box-sizing: border-box;
}