/**
 * Design tokens + shared button/CTA variables.
 * Sections consume these; do not hard-code button colors in section CSS.
 */

:root {
	/* Colour — brand */
	--color-brand-primary: #00004C;
	--color-brand-secondary: #003894;
	--color-brand-accent: #0D4199;

	--color-bg-white: #FFFFFF;
	--color-bg-light: #F5F7F9;
	--color-bg-blue-light: #E7EEFA;
	--color-bg-grey: #EFEFEF; /* four-column band — not on foundations board */
	--color-bg-dark: var(--color-brand-primary); /* #00004C */
	--color-bg: var(--color-bg-white);
	--color-bg-muted: var(--color-bg-light);
	--color-blue-200: #C5DAFF;
	--color-grey-blue-1: #8092B0;
	--color-grey-blue-2: #737B92;
	--color-steel: #CDD4E1;
	--color-blue-mid: #324E9D;

	/* Colour — text */
	--color-text-primary: var(--color-brand-primary); /* #00004C */
	--color-text-secondary: #454653;
	--color-text-tertiary: #737373;
	--color-near-black: #333333; /* display headings on light bands */
	--color-text-inverse: var(--color-bg-white); /* #FFFFFF */
	--color-inverse: var(--color-text-inverse);
	--color-text: var(--color-text-primary);
	--color-text-muted: var(--color-text-secondary);
	--color-nav: #222222;
	--color-footer-bg: #222222;
	--color-footer-tagline: #999b9f;
	--color-footer-muted: #9f9fa9;
	--color-footer-meta: color-mix(in srgb, #d4d4d8 50%, transparent);
	--color-bg-card: #eeeeee;
	--color-header-tagline: color-mix(in srgb, var(--color-brand-secondary) 50%, transparent);
	--color-border: #d4d4d8;
	--color-border-muted: #d9d9d9;
	--color-focus: var(--color-brand-secondary);
	--color-hero-overlay: color-mix(in srgb, var(--color-brand-accent) 75%, transparent);

	/* Type — Noto Sans only. Weights: 300 Light, 400 Regular, 500 Medium, 700 Bold, 800 ExtraBold, 900 Black. */
	--font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
	--font-sans: var(--font-family);

	--text-display-lg-size: 4rem; /* 64px ExtraBold — Figma H1 */
	--text-display-lg-weight: 800;
	--text-display-md-size: 3rem; /* 48px ExtraBold */
	--text-display-md-weight: 800;
	--text-h1-size: 2.5rem; /* 40px Bold */
	--text-h1-weight: 700;
	--text-h2-size: 2rem; /* 32px Bold */
	--text-h2-weight: 700;
	--text-h3-size: 1.25rem; /* 20px Bold */
	--text-h3-weight: 700;
	--text-body-lg-size: 1rem; /* 16px Regular */
	--text-body-lg-weight: 400;
	--text-body-lg-weight-light: 300;
	--text-body-size: 0.875rem; /* 14px Regular */
	--text-body-weight: 400;
	--text-body-sm-size: 0.8125rem; /* 13px Regular */
	--text-body-sm-weight: 400;
	--text-label-size: 0.875rem; /* 14px Medium */
	--text-label-weight: 500;
	--text-btn-size: 0.875rem; /* 14px Bold */
	--text-btn-weight: 700;
	--text-eyebrow-size: 0.875rem; /* 14px Bold, 15% tracking — ticker / category labels */
	--text-eyebrow-weight: 700;
	--text-eyebrow-line-height: 1.01;
	--text-eyebrow-letter-spacing: 0.15em;

	--text-heading-line-height: 1.01;
	--text-heading-letter-spacing: 0.08em;
	--text-body-line-height: 1.5;
	--text-body-letter-spacing: 0.05em;
	--text-label-line-height: 1.2;
	--text-label-letter-spacing: 0.08em;
	--text-btn-line-height: 1.2;
	--text-btn-letter-spacing: 0.08em;

	--font-size-base: var(--text-body-size);
	--line-height-base: var(--text-body-line-height);

	--nav-size: 0.9375rem;
	--nav-weight-regular: 500;
	--nav-weight-bold: 800;
	--nav-line-height: 1.2;
	--nav-letter-spacing: 0.08em;
	--text-footer-meta-size: 0.75rem; /* 12px copyright / legal */

	/* Space */
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-20: 1.25rem;
	--space-24: 1.5rem;
	--space-32: 2rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-64: 4rem;
	--space-80: 5rem;
	--space-96: 6rem;
	--space-120: 7.5rem;

	/* Breakpoints & grid
	 * Design canvases: desktop 1440 / tablet 768 / mobile 390.
	 * Vars cannot be used in @media — queries use 1439px and 767px.
	 * 96 + 1248 + 96 = 1440. */
	--bp-desktop: 1440px;
	--bp-tablet: 768px;
	--bp-mobile: 390px;
	--layout-desktop: 90rem; /* 1440px */
	--container-max: 78rem; /* 1248px */
	--grid-columns: 12;
	--grid-gutter: var(--space-24); /* 24px */
	--section-pad-inline: var(--space-96); /* 96px desktop */

	/* Header chrome */
	--header-bar-height: 6.5rem;
	--header-pad-inline: var(--section-pad-inline);

	/* Menu scroll offset (sticky header: 104px bar) */
	--menu-scroll-offset: 6.5rem;
	--menu-scroll-offset-admin: 8.5rem;
	--menu-scroll-offset-admin-mobile: 9.5rem;

	/* ---- Primary CTA ---- */
	--btn-primary-bg: var(--color-brand-secondary);
	--btn-primary-bg-hover: #002a6e;
	--btn-primary-bg-active: #001f52;
	--btn-primary-bg-disabled: #9f9fa9;
	--btn-primary-text: var(--color-text-inverse);
	--btn-primary-text-hover: var(--color-text-inverse);
	--btn-primary-text-active: var(--color-text-inverse);
	--btn-primary-text-disabled: var(--color-text-inverse);
	--btn-primary-border: transparent;
	--btn-primary-border-hover: transparent;
	--btn-primary-border-active: transparent;
	--btn-primary-border-disabled: transparent;
	--btn-primary-border-width: 0;
	--btn-primary-radius: 0.25rem;
	--btn-primary-padding-block: 0.75rem;
	--btn-primary-padding-inline: 1.5rem;
	--btn-primary-font-size: var(--text-btn-size);
	--btn-primary-font-weight: var(--text-btn-weight);
	--btn-primary-letter-spacing: var(--text-btn-letter-spacing);
	--btn-primary-line-height: var(--text-btn-line-height);
	--btn-primary-gap: 0.5rem;
	--btn-primary-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	--btn-primary-shadow: none;
	--btn-primary-shadow-hover: none;

	/* ---- Secondary CTA ---- */
	--btn-secondary-bg: transparent;
	--btn-secondary-bg-hover: var(--color-bg-blue-light);
	--btn-secondary-bg-active: #c5daff;
	--btn-secondary-bg-disabled: transparent;
	--btn-secondary-text: var(--color-brand-secondary);
	--btn-secondary-text-hover: #002a6e;
	--btn-secondary-text-active: #001f52;
	--btn-secondary-text-disabled: #9f9fa9;
	--btn-secondary-border: var(--color-brand-secondary);
	--btn-secondary-border-hover: #002a6e;
	--btn-secondary-border-active: #001f52;
	--btn-secondary-border-disabled: #d4d4d8;
	--btn-secondary-border-width: 1px;
	--btn-secondary-radius: 0.25rem;
	--btn-secondary-padding-block: 0.75rem;
	--btn-secondary-padding-inline: 1.5rem;
	--btn-secondary-font-size: var(--text-btn-size);
	--btn-secondary-font-weight: var(--text-btn-weight);
	--btn-secondary-letter-spacing: var(--text-btn-letter-spacing);
	--btn-secondary-line-height: var(--text-btn-line-height);
	--btn-secondary-gap: 0.5rem;
	--btn-secondary-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	--btn-secondary-shadow: none;
	--btn-secondary-shadow-hover: none;

	/* ---- Card outline CTA (brand list, Figma 682:1782) ---- */
	--btn-card-bg: var(--color-bg-white);
	--btn-card-bg-hover: var(--color-brand-secondary);
	--btn-card-bg-active: #002a6e;
	--btn-card-bg-disabled: var(--color-bg-white);
	--btn-card-text: var(--color-brand-secondary);
	--btn-card-text-hover: var(--color-text-inverse);
	--btn-card-text-active: var(--color-text-inverse);
	--btn-card-text-disabled: #9f9fa9;
	--btn-card-border: var(--color-brand-secondary);
	--btn-card-border-hover: var(--color-brand-secondary);
	--btn-card-border-active: #002a6e;
	--btn-card-border-disabled: #d4d4d8;
	--btn-card-border-width: 2px;
	--btn-card-radius: 0;
	--btn-card-padding-block: 0.75rem; /* 12px */
	--btn-card-padding-inline: 1.5rem;
	--btn-card-font-size: 0.9375rem; /* 15px ExtraBold */
	--btn-card-font-weight: 800;
	--btn-card-letter-spacing: 0.08em;
	--btn-card-line-height: 1.5;
	--btn-card-min-height: 3.15625rem; /* 50.5px */
	--btn-card-gap: 0.5rem;
	--btn-card-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	--btn-card-shadow: none;
	--btn-card-shadow-hover: none;

	/* ---- Pager (Figma 475:2042) ---- */
	--btn-pager-bg: var(--color-bg-white);
	--btn-pager-bg-hover: var(--color-bg-white);
	--btn-pager-bg-active: var(--color-bg-blue-light);
	--btn-pager-bg-disabled: var(--color-bg-white);
	--btn-pager-text: var(--color-brand-secondary);
	--btn-pager-text-hover: var(--color-brand-secondary);
	--btn-pager-text-active: var(--color-brand-secondary);
	--btn-pager-text-disabled: var(--color-brand-secondary);
	--btn-pager-border: var(--color-blue-200);
	--btn-pager-border-hover: var(--color-brand-secondary);
	--btn-pager-border-active: var(--color-brand-secondary);
	--btn-pager-border-disabled: var(--color-blue-200);
	--btn-pager-border-width: 1px;
	--btn-pager-radius: 0;
	--btn-pager-padding-block: 0.5rem; /* 8px */
	--btn-pager-padding-inline: 1rem;
	--btn-pager-font-size: var(--text-body-lg-size); /* 16px Bold */
	--btn-pager-font-weight: 700;
	--btn-pager-letter-spacing: 0;
	--btn-pager-line-height: 1.5; /* 24px */
	--btn-pager-min-height: 2.625rem; /* 42px Previous / Next */
	--btn-pager-number-size: 2.5rem; /* 40px */
	--btn-pager-gap: 0;
	--btn-pager-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	--btn-pager-shadow: none;
	--btn-pager-shadow-hover: none;

	--btn-pager-current-bg: var(--color-brand-secondary);
	--btn-pager-current-bg-hover: var(--color-brand-secondary);
	--btn-pager-current-text: var(--color-text-inverse);
	--btn-pager-current-border: transparent;
	--btn-pager-current-border-width: 0;

	/* ---- Ghost CTA ---- */
	--btn-ghost-bg: transparent;
	--btn-ghost-bg-hover: color-mix(in srgb, var(--color-brand-secondary) 8%, transparent);
	--btn-ghost-bg-active: color-mix(in srgb, var(--color-brand-secondary) 16%, transparent);
	--btn-ghost-bg-disabled: transparent;
	--btn-ghost-text: var(--color-brand-secondary);
	--btn-ghost-text-hover: #002a6e;
	--btn-ghost-text-active: #001f52;
	--btn-ghost-text-disabled: #9f9fa9;
	--btn-ghost-border: transparent;
	--btn-ghost-border-hover: transparent;
	--btn-ghost-border-active: transparent;
	--btn-ghost-border-disabled: transparent;
	--btn-ghost-border-width: 0;
	--btn-ghost-radius: 0.25rem;
	--btn-ghost-padding-block: 0.75rem;
	--btn-ghost-padding-inline: 1.5rem;
	--btn-ghost-font-size: var(--text-btn-size);
	--btn-ghost-font-weight: var(--text-btn-weight);
	--btn-ghost-letter-spacing: var(--text-btn-letter-spacing);
	--btn-ghost-line-height: var(--text-btn-line-height);
	--btn-ghost-gap: 0.5rem;
	--btn-ghost-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	--btn-ghost-shadow: none;
	--btn-ghost-shadow-hover: none;

	/* ---- Header search control (475:1849) ---- */
	--btn-header-search-bg: transparent;
	--btn-header-search-bg-hover: transparent;
	--btn-header-search-text: #222222;
	--btn-header-search-text-hover: var(--color-brand-secondary);
	--btn-header-search-border: color-mix(in srgb, var(--color-brand-secondary) 50%, transparent);
	--btn-header-search-border-hover: var(--color-brand-secondary);
	--btn-header-search-border-width: 1px;
	--btn-header-search-radius: 0;
	--btn-header-search-padding-block: 1rem;
	--btn-header-search-padding-inline: 1.25rem;
	--btn-header-search-font-size: 0.9375rem;
	--btn-header-search-font-weight: 800;
	--btn-header-search-letter-spacing: 0.08em;
	--btn-header-search-line-height: 1.2;
	--btn-header-search-gap: 0.625rem;
	--btn-header-search-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	--btn-header-search-shadow: none;
	--btn-header-search-shadow-hover: none;

	/* ---- Carousel prev/next (four-column cards, Figma 475:1774) ---- */
	--btn-carousel-bg: transparent;
	--btn-carousel-bg-hover: transparent;
	--btn-carousel-bg-active: transparent;
	--btn-carousel-bg-disabled: transparent;
	--btn-carousel-text: var(--color-brand-secondary);
	--btn-carousel-text-hover: var(--color-brand-secondary);
	--btn-carousel-text-active: var(--color-brand-secondary);
	--btn-carousel-text-disabled: var(--color-border-muted);
	--btn-carousel-border: var(--color-brand-secondary);
	--btn-carousel-border-hover: var(--color-brand-secondary);
	--btn-carousel-border-active: var(--color-brand-secondary);
	--btn-carousel-border-disabled: var(--color-border-muted);
	--btn-carousel-border-width: 1px;
	--btn-carousel-radius: 0;
	--btn-carousel-size: 3.875rem; /* 62px */
	--btn-carousel-icon-size: 1.5rem; /* 24px */
	--btn-carousel-gap: 0.375rem; /* 6px */
	--btn-carousel-padding-block: 0;
	--btn-carousel-padding-inline: 0;
	--btn-carousel-font-size: 0;
	--btn-carousel-font-weight: 400;
	--btn-carousel-letter-spacing: 0;
	--btn-carousel-line-height: 1;
	--btn-carousel-transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	--btn-carousel-shadow: none;
	--btn-carousel-shadow-hover: none;

	/* ---- Footer social CTA (Figma 475:1773) ---- */
	--btn-footer-social-bg: transparent;
	--btn-footer-social-bg-hover: transparent;
	--btn-footer-social-bg-active: transparent;
	--btn-footer-social-bg-disabled: transparent;
	--btn-footer-social-text: var(--color-footer-muted);
	--btn-footer-social-text-hover: var(--color-text-inverse);
	--btn-footer-social-text-active: var(--color-text-inverse);
	--btn-footer-social-text-disabled: var(--color-footer-meta);
	--btn-footer-social-border: color-mix(in srgb, var(--color-footer-muted) 50%, transparent);
	--btn-footer-social-border-hover: var(--color-footer-muted);
	--btn-footer-social-border-active: var(--color-footer-muted);
	--btn-footer-social-border-disabled: var(--color-footer-meta);
	--btn-footer-social-border-width: 1px;
	--btn-footer-social-radius: 0;
	--btn-footer-social-padding-block: 1rem;
	--btn-footer-social-padding-inline: 1.25rem;
	--btn-footer-social-font-size: var(--text-body-size);
	--btn-footer-social-font-weight: var(--text-body-weight);
	--btn-footer-social-letter-spacing: var(--text-body-letter-spacing);
	--btn-footer-social-line-height: var(--text-body-line-height);
	--btn-footer-social-gap: 0.625rem;
	--btn-footer-social-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	--btn-footer-social-shadow: none;
	--btn-footer-social-shadow-hover: none;

	/* ---- Angled CTAs (hero / dark bands, Figma 475:1829) ---- */
	--btn-angled-skew: 17deg;
	--btn-angled-min-width: 17.625rem;
	--btn-angled-min-height: 3.6875rem;
	--btn-angled-padding-block: 0.625rem;
	--btn-angled-padding-inline: 1.5625rem;
	--btn-angled-font-size: 0.9375rem;
	--btn-angled-font-weight: 800;
	--btn-angled-letter-spacing: 0.08em;
	--btn-angled-line-height: 1.2;
	--btn-angled-border-width: 1px;
	--btn-angled-radius: 0;
	--btn-angled-gap: 0.5rem;
	--btn-angled-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	--btn-angled-shadow: none;
	--btn-angled-shadow-hover: none;

	--btn-angled-outline-bg: transparent;
	--btn-angled-outline-bg-hover: var(--color-text-inverse);
	--btn-angled-outline-bg-active: var(--color-text-inverse);
	--btn-angled-outline-bg-disabled: transparent;
	--btn-angled-outline-text: var(--color-text-inverse);
	--btn-angled-outline-text-hover: var(--color-brand-secondary);
	--btn-angled-outline-text-active: var(--color-brand-primary);
	--btn-angled-outline-text-disabled: rgb(255 255 255 / 0.5);
	--btn-angled-outline-border: var(--color-text-inverse);
	--btn-angled-outline-border-hover: var(--color-text-inverse);
	--btn-angled-outline-border-active: var(--color-text-inverse);
	--btn-angled-outline-border-disabled: rgb(255 255 255 / 0.4);

	--btn-angled-solid-bg: var(--color-bg-blue-light);
	--btn-angled-solid-bg-hover: var(--color-text-inverse);
	--btn-angled-solid-bg-active: var(--color-text-inverse);
	--btn-angled-solid-bg-disabled: #9f9fa9;
	--btn-angled-solid-text: var(--color-brand-secondary);
	--btn-angled-solid-text-hover: var(--color-brand-primary);
	--btn-angled-solid-text-active: var(--color-brand-primary);
	--btn-angled-solid-text-disabled: var(--color-text-inverse);
	--btn-angled-solid-border: var(--color-bg-blue-light);
	--btn-angled-solid-border-hover: var(--color-text-inverse);
	--btn-angled-solid-border-active: var(--color-text-inverse);
	--btn-angled-solid-border-disabled: #9f9fa9;

	--btn-angled-brand-bg: var(--color-brand-secondary);
	--btn-angled-brand-bg-hover: #002a6e;
	--btn-angled-brand-bg-active: #001f52;
	--btn-angled-brand-bg-disabled: #9f9fa9;
	--btn-angled-brand-text: var(--color-bg-blue-light);
	--btn-angled-brand-text-hover: var(--color-bg-blue-light);
	--btn-angled-brand-text-active: var(--color-bg-blue-light);
	--btn-angled-brand-text-disabled: var(--color-text-inverse);
	--btn-angled-brand-border: var(--color-brand-secondary);
	--btn-angled-brand-border-hover: #002a6e;
	--btn-angled-brand-border-active: #001f52;
	--btn-angled-brand-border-disabled: #9f9fa9;

	/* Angled brand outline — light bands (single post CTAs) */
	--btn-angled-brand-outline-bg: transparent;
	--btn-angled-brand-outline-bg-hover: var(--color-bg-blue-light);
	--btn-angled-brand-outline-bg-active: #c5daff;
	--btn-angled-brand-outline-bg-disabled: transparent;
	--btn-angled-brand-outline-text: var(--color-brand-secondary);
	--btn-angled-brand-outline-text-hover: #002a6e;
	--btn-angled-brand-outline-text-active: #001f52;
	--btn-angled-brand-outline-text-disabled: #9f9fa9;
	--btn-angled-brand-outline-border: var(--color-brand-secondary);
	--btn-angled-brand-outline-border-hover: #002a6e;
	--btn-angled-brand-outline-border-active: #001f52;
	--btn-angled-brand-outline-border-disabled: #d4d4d8;

	--btn-angled-compact-min-width: 11.75rem; /* 188px — why-us CTA */
	--btn-angled-compact-min-height: 2.875rem; /* 46px */
	--btn-angled-compact-padding-block: 0.625rem;
	--btn-angled-compact-padding-inline: 1.5625rem;
}

@media (max-width: 1439px) {
	:root {
		--section-pad-inline: var(--space-48); /* 48px tablet — not in spec; keeps 96px from crushing 768 canvas */
	}
}

@media (max-width: 767px) {
	:root {
		--section-pad-inline: var(--space-24); /* 24px = gutter, mobile canvas 390 */
	}
}

/* Shared button primitives — sections compose with these classes or local vars */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--btn-primary-gap);
	font-family: var(--font-sans);
	text-decoration: none;
	cursor: pointer;
	border-style: solid;
	box-sizing: border-box;
}

.btn:disabled,
.btn[aria-disabled='true'] {
	cursor: not-allowed;
	pointer-events: none;
}

.btn--primary {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border-color: var(--btn-primary-border);
	border-width: var(--btn-primary-border-width);
	border-radius: var(--btn-primary-radius);
	padding-block: var(--btn-primary-padding-block);
	padding-inline: var(--btn-primary-padding-inline);
	font-size: var(--btn-primary-font-size);
	font-weight: var(--btn-primary-font-weight);
	letter-spacing: var(--btn-primary-letter-spacing);
	line-height: var(--btn-primary-line-height);
	gap: var(--btn-primary-gap);
	transition: var(--btn-primary-transition);
	box-shadow: var(--btn-primary-shadow);
}

.btn--primary:hover {
	background-color: var(--btn-primary-bg-hover);
	color: var(--btn-primary-text-hover);
	border-color: var(--btn-primary-border-hover);
	box-shadow: var(--btn-primary-shadow-hover);
}

.btn--primary:active {
	background-color: var(--btn-primary-bg-active);
	color: var(--btn-primary-text-active);
	border-color: var(--btn-primary-border-active);
}

.btn--primary:disabled,
.btn--primary[aria-disabled='true'] {
	background-color: var(--btn-primary-bg-disabled);
	color: var(--btn-primary-text-disabled);
	border-color: var(--btn-primary-border-disabled);
}

.btn--secondary {
	background-color: var(--btn-secondary-bg);
	color: var(--btn-secondary-text);
	border-color: var(--btn-secondary-border);
	border-width: var(--btn-secondary-border-width);
	border-radius: var(--btn-secondary-radius);
	padding-block: var(--btn-secondary-padding-block);
	padding-inline: var(--btn-secondary-padding-inline);
	font-size: var(--btn-secondary-font-size);
	font-weight: var(--btn-secondary-font-weight);
	letter-spacing: var(--btn-secondary-letter-spacing);
	line-height: var(--btn-secondary-line-height);
	gap: var(--btn-secondary-gap);
	transition: var(--btn-secondary-transition);
	box-shadow: var(--btn-secondary-shadow);
}

.btn--secondary:hover {
	background-color: var(--btn-secondary-bg-hover);
	color: var(--btn-secondary-text-hover);
	border-color: var(--btn-secondary-border-hover);
	box-shadow: var(--btn-secondary-shadow-hover);
}

.btn--secondary:active {
	background-color: var(--btn-secondary-bg-active);
	color: var(--btn-secondary-text-active);
	border-color: var(--btn-secondary-border-active);
}

.btn--secondary:disabled,
.btn--secondary[aria-disabled='true'] {
	background-color: var(--btn-secondary-bg-disabled);
	color: var(--btn-secondary-text-disabled);
	border-color: var(--btn-secondary-border-disabled);
}

.btn--card {
	background-color: var(--btn-card-bg);
	color: var(--btn-card-text);
	border-color: var(--btn-card-border);
	border-width: var(--btn-card-border-width);
	border-radius: var(--btn-card-radius);
	padding-block: var(--btn-card-padding-block);
	padding-inline: var(--btn-card-padding-inline);
	min-height: var(--btn-card-min-height);
	font-size: var(--btn-card-font-size);
	font-weight: var(--btn-card-font-weight);
	letter-spacing: var(--btn-card-letter-spacing);
	line-height: var(--btn-card-line-height);
	gap: var(--btn-card-gap);
	text-transform: uppercase;
	transition: var(--btn-card-transition);
	box-shadow: var(--btn-card-shadow);
}

.btn--card:hover {
	background-color: var(--btn-card-bg-hover);
	color: var(--btn-card-text-hover);
	border-color: var(--btn-card-border-hover);
	box-shadow: var(--btn-card-shadow-hover);
}

.btn--card:active {
	background-color: var(--btn-card-bg-active);
	color: var(--btn-card-text-active);
	border-color: var(--btn-card-border-active);
}

.btn--card:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.btn--card:disabled,
.btn--card[aria-disabled='true'] {
	background-color: var(--btn-card-bg-disabled);
	color: var(--btn-card-text-disabled);
	border-color: var(--btn-card-border-disabled);
}

.btn--pager {
	background-color: var(--btn-pager-bg);
	color: var(--btn-pager-text);
	border-color: var(--btn-pager-border);
	border-width: var(--btn-pager-border-width);
	border-radius: var(--btn-pager-radius);
	padding-block: var(--btn-pager-padding-block);
	padding-inline: var(--btn-pager-padding-inline);
	min-height: var(--btn-pager-min-height);
	font-size: var(--btn-pager-font-size);
	font-weight: var(--btn-pager-font-weight);
	letter-spacing: var(--btn-pager-letter-spacing);
	line-height: var(--btn-pager-line-height);
	gap: var(--btn-pager-gap);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--btn-pager-transition);
	box-shadow: var(--btn-pager-shadow);
}

.btn--pager:hover {
	background-color: var(--btn-pager-bg-hover);
	color: var(--btn-pager-text-hover);
	border-color: var(--btn-pager-border-hover);
	box-shadow: var(--btn-pager-shadow-hover);
}

.btn--pager:active {
	background-color: var(--btn-pager-bg-active);
	color: var(--btn-pager-text-active);
	border-color: var(--btn-pager-border-active);
}

.btn--pager:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.btn--pager:disabled,
.btn--pager[aria-disabled='true'] {
	background-color: var(--btn-pager-bg-disabled);
	color: var(--btn-pager-text-disabled);
	border-color: var(--btn-pager-border-disabled);
	cursor: default;
	pointer-events: none;
}

.btn--pager-current {
	background-color: var(--btn-pager-current-bg);
	color: var(--btn-pager-current-text);
	border-color: var(--btn-pager-current-border);
	border-width: var(--btn-pager-current-border-width);
	border-radius: var(--btn-pager-radius);
	padding: 0;
	width: var(--btn-pager-number-size);
	height: var(--btn-pager-number-size);
	min-width: var(--btn-pager-number-size);
	min-height: var(--btn-pager-number-size);
	font-size: var(--btn-pager-font-size);
	font-weight: var(--btn-pager-font-weight);
	letter-spacing: var(--btn-pager-letter-spacing);
	line-height: var(--btn-pager-line-height);
	cursor: default;
	pointer-events: none;
}

.btn--ghost {
	background-color: var(--btn-ghost-bg);
	color: var(--btn-ghost-text);
	border-color: var(--btn-ghost-border);
	border-width: var(--btn-ghost-border-width);
	border-radius: var(--btn-ghost-radius);
	padding-block: var(--btn-ghost-padding-block);
	padding-inline: var(--btn-ghost-padding-inline);
	font-size: var(--btn-ghost-font-size);
	font-weight: var(--btn-ghost-font-weight);
	letter-spacing: var(--btn-ghost-letter-spacing);
	line-height: var(--btn-ghost-line-height);
	gap: var(--btn-ghost-gap);
	transition: var(--btn-ghost-transition);
	box-shadow: var(--btn-ghost-shadow);
}

.btn--ghost:hover {
	background-color: var(--btn-ghost-bg-hover);
	color: var(--btn-ghost-text-hover);
	border-color: var(--btn-ghost-border-hover);
	box-shadow: var(--btn-ghost-shadow-hover);
}

.btn--ghost:active {
	background-color: var(--btn-ghost-bg-active);
	color: var(--btn-ghost-text-active);
	border-color: var(--btn-ghost-border-active);
}

.btn--ghost:disabled,
.btn--ghost[aria-disabled='true'] {
	background-color: var(--btn-ghost-bg-disabled);
	color: var(--btn-ghost-text-disabled);
	border-color: var(--btn-ghost-border-disabled);
}

.btn--footer-social {
	background-color: var(--btn-footer-social-bg);
	color: var(--btn-footer-social-text);
	border-color: var(--btn-footer-social-border);
	border-width: var(--btn-footer-social-border-width);
	border-radius: var(--btn-footer-social-radius);
	padding-block: var(--btn-footer-social-padding-block);
	padding-inline: var(--btn-footer-social-padding-inline);
	font-size: var(--btn-footer-social-font-size);
	font-weight: var(--btn-footer-social-font-weight);
	letter-spacing: var(--btn-footer-social-letter-spacing);
	line-height: var(--btn-footer-social-line-height);
	gap: var(--btn-footer-social-gap);
	transition: var(--btn-footer-social-transition);
	box-shadow: var(--btn-footer-social-shadow);
	text-decoration: none;
}

.btn--footer-social:hover {
	background-color: var(--btn-footer-social-bg-hover);
	color: var(--btn-footer-social-text-hover);
	border-color: var(--btn-footer-social-border-hover);
	box-shadow: var(--btn-footer-social-shadow-hover);
}

.btn--footer-social:focus-visible {
	outline: 2px solid var(--color-text-inverse);
	outline-offset: 3px;
}

.btn--footer-social:active {
	background-color: var(--btn-footer-social-bg-active);
	color: var(--btn-footer-social-text-active);
	border-color: var(--btn-footer-social-border-active);
}

.btn--footer-social:disabled,
.btn--footer-social[aria-disabled='true'] {
	background-color: var(--btn-footer-social-bg-disabled);
	color: var(--btn-footer-social-text-disabled);
	border-color: var(--btn-footer-social-border-disabled);
}

.btn--angled {
	min-width: var(--btn-angled-min-width);
	min-height: var(--btn-angled-min-height);
	padding-block: var(--btn-angled-padding-block);
	padding-inline: var(--btn-angled-padding-inline);
	font-size: var(--btn-angled-font-size);
	font-weight: var(--btn-angled-font-weight);
	letter-spacing: var(--btn-angled-letter-spacing);
	line-height: var(--btn-angled-line-height);
	gap: var(--btn-angled-gap);
	text-transform: uppercase;
	border-width: var(--btn-angled-border-width);
	border-radius: var(--btn-angled-radius);
	box-shadow: var(--btn-angled-shadow);
	transition: var(--btn-angled-transition);
	transform: skewX(var(--btn-angled-skew));
	transform-origin: 0 50%;
}

.btn--angled .btn__label {
	display: inline-block;
	transform: skewX(calc(-1 * var(--btn-angled-skew)));
}

.btn--angled:focus-visible {
	outline: 2px solid var(--color-text-inverse);
	outline-offset: 3px;
}

.btn--angled-outline {
	background-color: var(--btn-angled-outline-bg);
	color: var(--btn-angled-outline-text);
	border-color: var(--btn-angled-outline-border);
}

.btn--angled-outline:hover {
	background-color: var(--btn-angled-outline-bg-hover);
	color: var(--btn-angled-outline-text-hover);
	border-color: var(--btn-angled-outline-border-hover);
	box-shadow: var(--btn-angled-shadow-hover);
}

.btn--angled-outline:active {
	background-color: var(--btn-angled-outline-bg-active);
	color: var(--btn-angled-outline-text-active);
	border-color: var(--btn-angled-outline-border-active);
}

.btn--angled-outline:disabled,
.btn--angled-outline[aria-disabled='true'] {
	background-color: var(--btn-angled-outline-bg-disabled);
	color: var(--btn-angled-outline-text-disabled);
	border-color: var(--btn-angled-outline-border-disabled);
}

.btn--angled-solid {
	background-color: var(--btn-angled-solid-bg);
	color: var(--btn-angled-solid-text);
	border-color: var(--btn-angled-solid-border);
}

.btn--angled-solid:hover {
	background-color: var(--btn-angled-solid-bg-hover);
	color: var(--btn-angled-solid-text-hover);
	border-color: var(--btn-angled-solid-border-hover);
	box-shadow: var(--btn-angled-shadow-hover);
}

.btn--angled-solid:active {
	background-color: var(--btn-angled-solid-bg-active);
	color: var(--btn-angled-solid-text-active);
	border-color: var(--btn-angled-solid-border-active);
}

.btn--angled-solid:disabled,
.btn--angled-solid[aria-disabled='true'] {
	background-color: var(--btn-angled-solid-bg-disabled);
	color: var(--btn-angled-solid-text-disabled);
	border-color: var(--btn-angled-solid-border-disabled);
}

.btn--angled-brand {
	background-color: var(--btn-angled-brand-bg);
	color: var(--btn-angled-brand-text);
	border-color: var(--btn-angled-brand-border);
}

.btn--angled-brand:hover {
	background-color: var(--btn-angled-brand-bg-hover);
	color: var(--btn-angled-brand-text-hover);
	border-color: var(--btn-angled-brand-border-hover);
	box-shadow: var(--btn-angled-shadow-hover);
}

.btn--angled-brand:active {
	background-color: var(--btn-angled-brand-bg-active);
	color: var(--btn-angled-brand-text-active);
	border-color: var(--btn-angled-brand-border-active);
}

.btn--angled-brand:disabled,
.btn--angled-brand[aria-disabled='true'] {
	background-color: var(--btn-angled-brand-bg-disabled);
	color: var(--btn-angled-brand-text-disabled);
	border-color: var(--btn-angled-brand-border-disabled);
}

.btn--angled-brand:focus-visible {
	outline-color: var(--color-brand-secondary);
}

.btn--angled-brand-outline {
	background-color: var(--btn-angled-brand-outline-bg);
	color: var(--btn-angled-brand-outline-text);
	border-color: var(--btn-angled-brand-outline-border);
}

.btn--angled-brand-outline:hover {
	background-color: var(--btn-angled-brand-outline-bg-hover);
	color: var(--btn-angled-brand-outline-text-hover);
	border-color: var(--btn-angled-brand-outline-border-hover);
	box-shadow: var(--btn-angled-shadow-hover);
}

.btn--angled-brand-outline:active {
	background-color: var(--btn-angled-brand-outline-bg-active);
	color: var(--btn-angled-brand-outline-text-active);
	border-color: var(--btn-angled-brand-outline-border-active);
}

.btn--angled-brand-outline:disabled,
.btn--angled-brand-outline[aria-disabled='true'] {
	background-color: var(--btn-angled-brand-outline-bg-disabled);
	color: var(--btn-angled-brand-outline-text-disabled);
	border-color: var(--btn-angled-brand-outline-border-disabled);
}

.btn--angled-brand-outline:focus-visible {
	outline: 2px solid var(--color-brand-secondary);
	outline-offset: 3px;
}