/*!
 * Harvardbridge Portal
 * @version 1.2.0
 * Changelog:
 * 1.2.0 — Light, business-neutral surface built on the company's own palette. The parent
 *         wordmark is dark navy, so it requires a light background; the previous dark theme
 *         would have rendered it invisible. Also defines the plugin's tokens, so the quote
 *         form adopts the same palette rather than rendering dark on light.
 * 1.0.0 — Initial build.
 *
 * Every value below is measured, not chosen by eye:
 *   ink #16243D on white       15.51:1
 *   ink #16243D on #F4F6F9     14.33:1
 *   muted #4A5568 on #F4F6F9    6.95:1
 *   purple #5F4BB6 on white     6.63:1
 *   white on purple #5F4BB6     6.63:1   ← button text
 *
 * The teal #0E9594 measures 3.38:1 on the page surface and is therefore used as a rule and an
 * accent only, never as text. The company's mark uses it as a dot, which is exactly right.
 */
:root {
	/* Company palette */
	--hbp-ink: #16243D;
	--hbp-muted: #4A5568;
	--hbp-purple: #5F4BB6;
	--hbp-purple-soft: #A99BE8;
	--hbp-teal: #0E9594;
	--hbp-amber: #D98E2B;

	/* Neutral surfaces */
	--hbp-page: #F4F6F9;
	--hbp-surface: #FFFFFF;
	--hbp-line: #DCE2EA;

	--hbp-wrap: 52rem;

	/* The quote form and the client document view read these. Defining them here means the
	   plugin adopts this palette instead of falling back to its own dark defaults. */
	--hba-chrome: #16243D;
	--hba-steel: #4A5568;
	--hba-carbon: #FFFFFF;
	--hba-slate: #DCE2EA;
	--hba-obsidian: #F4F6F9;
	--hba-solar: #5F4BB6;
	--hba-on-cta: #FFFFFF;
	--hba-verified: #0C7A4E;
	--hba-alert: #B3261E;
}

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

body {
	margin: 0;
	background: var(--hbp-page);
	color: var(--hbp-ink);
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.02rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--hbp-purple); text-underline-offset: 0.2em; }
a:hover { color: var(--hbp-ink); }

:focus-visible { outline: 3px solid var(--hbp-purple); outline-offset: 2px; }

.hbp-skip {
	position: absolute;
	left: -9999px;
	padding: 0.75rem 1rem;
	background: var(--hbp-purple);
	color: #FFFFFF;
	font-weight: 700;
}

.hbp-skip:focus { left: 1rem; top: 1rem; z-index: 10; }

.hbp-wrap {
	width: 100%;
	max-width: var(--hbp-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Masthead: white, with the company's own teal-to-amber rule beneath it — the same two
   accents the mark uses, so the header belongs to the logo rather than sitting under it. */
.hbp-header {
	padding-block: 1.25rem;
	background: var(--hbp-surface);
	border-bottom: 1px solid var(--hbp-line);
	box-shadow: 0 1px 2px rgba(22, 36, 61, 0.06);
}

.hbp-header::after {
	content: "";
	display: block;
	height: 3px;
	margin-top: 1.25rem;
	margin-bottom: -1.25rem;
	background: linear-gradient(90deg, var(--hbp-teal) 0%, var(--hbp-purple) 55%, var(--hbp-amber) 100%);
}

.hbp-logo { display: inline-block; }
.hbp-logo img { width: auto; height: 42px; }

.hbp-wordmark { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: var(--hbp-ink); }

.hbp-main { padding-block: clamp(2rem, 6vw, 3.5rem) 3rem; min-height: 50vh; }

.hbp-title {
	margin: 0 0 1rem;
	font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--hbp-ink);
}

.hbp-content > * { margin-block: 0 1rem; }

.hbp-notice {
	max-width: 40rem;
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--hbp-surface);
	border: 1px solid var(--hbp-line);
	border-left: 3px solid var(--hbp-purple);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(22, 36, 61, 0.05);
}

.hbp-notice h1 { margin-top: 0; }

.hbp-muted { color: var(--hbp-muted); font-size: 0.92rem; }

.hbp-footer {
	padding-block: 1.5rem 2.5rem;
	border-top: 1px solid var(--hbp-line);
	font-size: 0.85rem;
	color: var(--hbp-muted);
}

.hbp-footer p { margin: 0 0 0.35rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}