/*
 * GoConsent theme - design tokens.
 *
 * Every colour, font, radius and shadow the theme uses, by name. Loaded first on
 * every page; no other stylesheet writes a raw colour value.
 *
 * Names: semantic first (--site-brand, --site-text-muted, --site-border), then the
 * palette by family and lightness (--site-green-28 is a green at 28% lightness; a
 * higher number is always lighter). Transparent tints add the opacity
 * (--site-green-alpha-12). --site-* never collides with the plugin's --gc-* tokens.
 */

/* Poppins, self-hosted: a privacy product doesn't send its visitors to a font CDN. */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
}

/* Metric-matched fallback: until Poppins arrives, Arial is resized to Poppins' width and
   line height, so text doesn't jump or reflow when the real font swaps in. */
@font-face {
	font-family: "Poppins Fallback";
	font-weight: 400 600;
	src: local("Arial"), local("ArialMT"), local("Liberation Sans");
	size-adjust: 109.8%;
	ascent-override: 95.6%;
	descent-override: 31.9%;
	line-gap-override: 9.1%;
}

@font-face {
	font-family: "Poppins Fallback";
	font-weight: 700 900;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
	size-adjust: 106%;
	ascent-override: 99.1%;
	descent-override: 33%;
	line-gap-override: 9.4%;
}

:root {
	/* Palette */
	--site-green-20: #08492f;
	--site-green-28: #0a5c3e;
	--site-green-34: #0e7a52;
	--site-green-55: #3fb07f;
	--site-green-90: #dcefe5;
	--site-green-96: #eff7f2;
	--site-green-alpha-12: rgba(14, 122, 82, 0.12);
	--site-green-alpha-24: rgba(14, 122, 82, 0.24);

	--site-ink-12: #16231d;
	--site-ink-14: #231f20;
	--site-ink-30: #3b4741;
	--site-slate-40: #5b6660;
	--site-slate-55: #808a85;
	--site-slate-82: #cfd5d1;
	--site-slate-90: #e4e8e5;
	--site-slate-95: #f1f3f1;
	--site-paper-97: #f7f8f5;
	--site-white: #ffffff;

	--site-amber-40: #a15c07;
	--site-amber-94: #fdf3e2;
	--site-red-42: #b3261e;
	--site-red-95: #fbeceb;
	--site-blue-40: #1d4ed8;
	--site-blue-95: #eaf0fe;
	--site-callout: #c2410c;

	/* Semantic */
	--site-brand: var(--site-green-34);
	--site-brand-deep: var(--site-green-28);
	--site-brand-darkest: var(--site-green-20);
	--site-brand-soft: var(--site-green-96);
	--site-brand-tint: var(--site-green-90);
	--site-on-brand: var(--site-white);

	--site-text: var(--site-ink-12);
	--site-text-body: var(--site-ink-30);
	--site-text-muted: var(--site-slate-40);
	--site-text-faint: var(--site-slate-55);
	--site-heading: var(--site-ink-12);

	--site-bg: var(--site-white);
	--site-bg-tinted: var(--site-paper-97);
	--site-bg-sunken: var(--site-slate-95);
	--site-surface: var(--site-white);
	--site-border: var(--site-slate-90);
	--site-border-strong: var(--site-slate-82);

	--site-dark-bg: var(--site-ink-12);
	--site-dark-text: #e9eeeb;
	--site-dark-muted: #a9b4ae;
	--site-dark-border: rgba(255, 255, 255, 0.12);

	--site-focus: var(--site-green-34);
	--site-ok: var(--site-green-34);
	--site-warn: var(--site-amber-40);
	--site-warn-soft: var(--site-amber-94);
	--site-error: var(--site-red-42);
	--site-error-soft: var(--site-red-95);
	--site-info: var(--site-blue-40);
	--site-info-soft: var(--site-blue-95);

	/* Type */
	--site-font: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--site-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--site-size-xs: 0.8125rem;
	--site-size-sm: 0.9375rem;
	--site-size-md: 1.0625rem;
	--site-size-lg: 1.25rem;
	--site-size-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--site-size-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
	--site-size-3xl: clamp(2.3rem, 1.6rem + 3vw, 3.6rem);

	/* Shape and depth */
	--site-radius-sm: 8px;
	--site-radius: 14px;
	--site-radius-lg: 22px;
	--site-radius-pill: 999px;
	--site-shadow-sm: 0 1px 2px rgba(22, 35, 29, 0.06);
	--site-shadow: 0 10px 30px rgba(22, 35, 29, 0.08), 0 2px 6px rgba(22, 35, 29, 0.04);
	--site-shadow-lg: 0 30px 70px rgba(22, 35, 29, 0.14), 0 8px 20px rgba(22, 35, 29, 0.06);

	/* Layout */
	--site-width: 1180px;
	--site-width-narrow: 780px;
	--site-gutter: clamp(16px, 4vw, 32px);
	--site-section-space: clamp(64px, 8vw, 112px);
	--site-header-height: 72px;
	/* Sticky spacing. --site-admin-bar is WordPress's admin bar for signed-in users (0 for
	   visitors); --site-header-bottom is where the sticky header ends; --site-sticky-top is
	   where anything sticky (sidebars, contents) and every jump link should stop. */
	--site-admin-bar: 0px;
	--site-sticky-gap: 32px;
	--site-header-bottom: calc(var(--site-header-height) + var(--site-admin-bar));
	--site-sticky-top: calc(var(--site-header-bottom) + var(--site-sticky-gap));
}

/* WordPress puts .admin-bar on <body>; the derived values are declared again here because
   custom properties resolve where they are declared. html:has() covers scroll-padding. */
html:has(> body.admin-bar),
.admin-bar {
	--site-admin-bar: 32px;
	--site-header-bottom: calc(var(--site-header-height) + var(--site-admin-bar));
	--site-sticky-top: calc(var(--site-header-bottom) + var(--site-sticky-gap));
}

@media (max-width: 782px) {
	html:has(> body.admin-bar),
	.admin-bar {
		--site-admin-bar: 46px;
	}
}

/* At 600px and below WordPress lets the admin bar scroll away with the page. */
@media (max-width: 600px) {
	html:has(> body.admin-bar),
	.admin-bar {
		--site-admin-bar: 0px;
	}
}