/* ==========================================================================
   Cognito Bay Design Tokens
   Loaded site-wide. Every section built from here on should use these
   variables instead of hardcoded values.
   ========================================================================== */

:root {
	/* Colors */
		/* Colors */
	--cb-teal: #056D78;
	--cb-teal-hover: #045A63;
	--cb-teal-mid: #36BAB2;
	--cb-teal-dark: #1E7C85;
	--cb-teal-light: #9BDDD9;
	--cb-teal-tint: #E6F7F6;
	--cb-ink: #0A0A0A;
	--cb-hero-dark: #0A1F1E;
	--cb-gray-600: #5C5C5C;
	--cb-gray-200: #E4E4E4;
	--cb-gray-50: #FAFAFA;
	--cb-white: #FFFFFF;
	--cb-mint-bg: #D2F0EE;
	--cb-teal-bright: #20B2AA;

	/* Typography */
	--cb-font: 'Geist', -apple-system, sans-serif;
	--cb-h1: 40px;
	--cb-h2: 32px;
	--cb-h3: 24px;
	--cb-h4: 20px;
	--cb-body: 18px;
	--cb-medium: 16px;
	--cb-small: 14px;

	/* Spacing (8px grid) */
	--cb-space-1: 8px;
	--cb-space-2: 16px;
	--cb-space-3: 24px;
	--cb-space-4: 32px;
	--cb-space-6: 48px;
	--cb-space-8: 64px;
	--cb-space-12: 96px;

	/* Layout */
	--cb-container: 1200px;
	--cb-radius: 8px;
	--cb-radius-lg: 16px;
	--cb-radius: 8px;
	--cb-radius-lg: 16px;
	--cb-radius-pill: 999px;
}

@media (max-width: 768px) {
	:root {
		--cb-h1: 28px;
		--cb-h2: 24px;
		--cb-h3: 20px;
		--cb-h4: 18px;
		--cb-body: 16px;
		--cb-space-12: 56px;
	}
}

/* Base typography */
body {
	overflow-x: hidden; /* prevents a horizontal scrollbar from the 100vw trick below */
}

/* Breaks a section out of any width-constrained ancestor (like GP's
   .grid-container) so its background spans the full viewport. The
   content inside still uses .cb-container to hold at 1200px — these
   two classes always pair together, on every section, on every page. */
.cb-full-bleed {
	width: 100vw;
}

.grid-container:has(#content) {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

h1, h2, h3, h4 {
	font-family: var(--cb-font);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cb-ink);
}

a { color: var(--cb-teal); }
a:hover { color: var(--cb-teal-hover); }

/* Shared containers */
.cb-container {
	max-width: var(--cb-container);
	margin: 0 auto;
	padding: 0 var(--cb-space-3);
}

.site-content {
	display: block;
}

.cb-section {
	padding: var(--cb-space-12) 0;
}

/* Buttons — reused by every section going forward */
.cb-btn-primary {
	display: inline-block;
	background: var(--cb-teal-bright);
	color: var(--cb-white) !important;
	font-weight: 600;
	font-size: var(--cb-small);
	padding: 14px 28px;
	border-radius: var(--cb-radius);
	text-decoration: none;
	transition: background 0.2s ease;
	border-radius: var(--cb-radius-pill);
}
.cb-btn-primary:hover { background: var(--cb-teal-hover); color: var(--cb-white) !important; }

.cb-btn-secondary {
	display: inline-block;
	background: var(--cb-white) !important;
	color: var(--cb-ink) !important;
	font-weight: 600;
	font-size: var(--cb-small);
	padding: 12.5px 28px;
	border: 1.5px solid var(--cb-white);
	border-radius: var(--cb-radius);
	text-decoration: none;
	transition: all 0.2s ease;
	border-radius: var(--cb-radius-pill);
}
.cb-btn-secondary:hover { background: var(--cb-teal); color: var(--cb-ink) !important; }

.cb-btn-on-teal {
	display: inline-block;
	background: var(--cb-white);
	color: var(--cb-teal) !important;
	font-weight: 600;
	font-size: var(--cb-small);
	padding: 14px 28px;
	border-radius: var(--cb-radius-pill);
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.cb-btn-on-teal:hover {
	background: var(--cb-teal);
	color: var(--cb-white) !important;
}