/* Base layer: design tokens + global typography.
   Loaded after vendor.css, before components/*.css and any page CSS.
   Breakpoint convention for this whole project (used by every custom
   stylesheet from here on — vendor.css keeps its own Bootstrap breakpoints
   and is not affected):
     tablet : @media (max-width: 64rem)   /* 1024px */
     mobile : @media (max-width: 35rem)   /* 560px  */
   1rem = 16px (root font-size is the browser default, body confirms 16px
   below) — every rem value in this project can be read as px/16. */

:root{
	/* brand palette — single source of truth, replaces the ~6 near-identical
	   per-page palettes (--contact-*, --el-*, --sv-*, --am-*, ...) found in
	   the pre-refactor CSS. See AUDIT.md §5. */
	--primary-color        : #005BBB;
	--secondary-color      : #F3F8FF;
	--bg-color             : #FFFFFF;
	--text-color           : #000000;
	--accent-color         : #FFD500;
	--brand-blue           : #005BBB;
	--brand-blue-light     : #1D7BDF;
	--brand-blue-dark      : #003B7A;
	--brand-yellow         : #FFD500;
	--brand-yellow-dark    : #E7C100;
	--brand-muted          : #68716B;
	--white-color          : #FFFFFF;
	--divider-color        : #005BBB26;
	--dark-divider-color   : #FFFFFF1A;
	--error-color          : rgb(230, 87, 87);
	--default-font         : "Inter", sans-serif;
	--accent-font          : 'ClashGrotesk-Variable';

	/* Solar landing page uses a deliberately distinct sub-palette — kept
	   separate rather than merged into the brand tokens above. */
	--solar-blue           : #0759B6;
	--solar-dark           : #032F61;
	--solar-navy           : #04264A;
	--solar-yellow         : #FFD400;
	--solar-green          : #A9D832;
	--solar-muted          : #66736B;

	/* shared card convention (see components/card.css) */
	--card-radius          : 0.875rem; /* 14px */
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

body{
	font-family: var(--default-font);
	font-size: 1rem; /* 16px */
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 0.4375rem; /* 7px */
	background-color: var(--accent-color);
}

::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

::selection{
	color: var(--white-color);
	background-color: var(--accent-color);
	filter: invert(1);
}

p{
	line-height: 1.6em;
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: var(--accent-font);
}