/* CUPE BC Votes — theme foundation (ported from Next.js globals) */

:root {
	--layout-max-width: 1440px;
	--layout-gutter: 1.5rem;
	--layout-outer: max(0px, calc((100vw - var(--layout-max-width)) / 2));
	--twotone-blue-width: calc(
		var(--layout-outer) + var(--layout-gutter) + 5 / 12 *
			(min(100vw, var(--layout-max-width)) - 2 * var(--layout-gutter))
	);

	--brand-white: #ffffff;
	--brand-navy: #28346e;
	--brand-navy-dark: #101b50;
	--brand-blue: #0ea7e0;
	--brand-teal: #5ac6ce;
	--brand-black: #000000;
	--brand-gold: #fcb44a;
	--brand-overlay: #00000029;
	--brand-grey: #707070;

	--radius: 0.625rem;
	--radius-button: 12px;
	--radius-panel: 20px;
	--radius-pill: 30px;

	--font-sans: "proxima-nova", ui-sans-serif, system-ui, sans-serif;
	--font-display: "obviously", ui-sans-serif, system-ui, sans-serif;
	--font-display-narrow: "obviously-narrow", ui-sans-serif, system-ui, sans-serif;
	--font-display-wide: "obviously-wide", ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 1536px) {
	:root {
		--layout-max-width: 1600px;
	}
}

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

body {
	margin: 0;
	background-color: var(--brand-white);
	color: var(--brand-black);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
}

/* Layout helpers (match Next max-w-layout + gutter) */
.cupe-container {
	width: 100%;
	max-width: var(--layout-max-width);
	margin-inline: auto;
	padding-inline: var(--layout-gutter);
}

.cupe-section {
	width: 100%;
}

/* Typography helpers */
.cupe-font-sans {
	font-family: var(--font-sans);
}

.cupe-font-display {
	font-family: var(--font-display);
}

.cupe-font-display-narrow {
	font-family: var(--font-display-narrow);
}

.cupe-font-display-wide {
	font-family: var(--font-display-wide);
}