/**
 * Inadev 2026 — design tokens.
 *
 * Replaces the former theme.json settings (classic theme has no block
 * global-styles engine). Palette is unchanged from the previous theme.json.
 * Type scale and spacing scale are responsive, stepping at Bootstrap 5's
 * own grid breakpoints (576, 768, 992, 1400px) plus one extra 1920px tier
 * for true Full HD/large-monitor sizing on top of Bootstrap's own scale.
 */

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

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

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

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

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

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

:root {
	/* Brand palette */
	--brand-orange: #F26633;
	--brand-navy: #042D62;
	--brand-cyan: #1BC5EB;
	--blue-primary: #3F83FF;
	--blue-medium: #1B6BEB;
	--blue-link: #007AFF;
	--blue-alt: #196CED;
	--blue-dark: #003087;
	--blue-linkedin: #0A66C2;
	--white: #FFFFFF;
	--gray-50: #F5F5F5;
	--gray-75: #E7E7E7;
	--gray-100: #E6E6E6;
	--gray-200: #E1E1E1;
	--gray-300: #D9D9D9;
	--gray-400: #C4C4C4;
	--dark-gray: #333333;
	--charcoal: #242E3D;
	--black: #000000;
	--amber: #FF9900;
	--red-orange: #F5622B;
	--red: #FF3333;
	--light-red: #FF8F8F;
	--purple: #AB45DA;
	--aqua: #31F0FF;
	--green: #0ab440;
	--green-light: #56f490;

	/* Gradients */
	--gradient-navy-to-blue: linear-gradient(135deg, #042D62 0%, #003087 60%, #1B6BEB 100%);
	--gradient-orange-to-cyan: linear-gradient(120deg, #F26633 0%, #1BC5EB 100%);

	/* Typography */
	--font-poppins: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--fs-caption: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--fs-small: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
	--fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-body-large: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
	--fs-heading-7: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
	--fs-heading-6: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--fs-heading-5: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
	--fs-heading-4: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	--fs-heading-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--fs-heading-2: clamp(2rem, 1.6rem + 2vw, 3.25rem);
	--fs-heading-1: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
	--fs-display: clamp(2.75rem, 2rem + 3.75vw, 5.5rem);

	/* Spacing scale (slugs unchanged from the former preset spacingSizes;
	   values below are the base (<576px) size and grow at the responsive
	   breakpoints defined further down this file) */
	--spacing-10: 0.25rem;
	--spacing-20: 0.5rem;
	--spacing-30: 0.75rem;
	--spacing-40: 1rem;
	--spacing-50: 1.5rem;
	--spacing-60: 2rem;
	--spacing-70: 3rem;
	--spacing-80: 4rem;
	--spacing-90: 6rem;
	--spacing-100: 8rem;
}

body {
	font-family: var(--font-poppins);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	color: var(--dark-gray);
	background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.2;
	color: var(--black);
}

h1 { font-size: var(--fs-heading-1); }
h2 { font-size: var(--fs-heading-2); }
h3 { font-size: var(--fs-heading-3); }
h4 { font-size: var(--fs-heading-4); }
h5 { font-size: var(--fs-heading-5); }
h6 { font-size: var(--fs-heading-6); }

a {
	color: var(--blue-link);
}

a:hover {
	color: var(--brand-orange);
}

/* Text/background utility classes (replace the old has-*-color / has-*-background-color classes) */
.text-brand-navy { color: var(--brand-navy) !important; }
.text-brand-orange { color: var(--brand-orange) !important; }
.text-brand-cyan { color: var(--brand-cyan) !important; }
.text-dark-gray { color: var(--dark-gray) !important; }
.text-black { color: var(--black) !important; }
.text-white-token { color: var(--white) !important; }
.bg-brand-navy { background-color: var(--brand-navy) !important; }
.bg-brand-orange { background-color: var(--brand-orange) !important; }
.bg-brand-cyan { background-color: var(--brand-cyan) !important; }
.bg-charcoal { background-color: var(--charcoal) !important; }
.bg-gray-50 { background-color: var(--gray-50) !important; }

/* Font-size utility classes (replace the old has-*-font-size classes) */
.fs-caption { font-size: var(--fs-caption) !important; }
.fs-small { font-size: var(--fs-small) !important; }
.fs-body { font-size: var(--fs-body) !important; }
.fs-body-large { font-size: var(--fs-body-large) !important; }
.fs-heading-6 { font-size: var(--fs-heading-6) !important; }
.fs-heading-5 { font-size: var(--fs-heading-5) !important; }
.fs-heading-4 { font-size: var(--fs-heading-4) !important; }
.fs-heading-3 { font-size: var(--fs-heading-3) !important; }
.fs-heading-2 { font-size: var(--fs-heading-2) !important; }
.fs-heading-1 { font-size: var(--fs-heading-1) !important; }
.text-bold{ font-weight: 700 }
.text-semi-bold { font-weight: 600 }
.text-medium { font-weight: 500 }
/* Responsive type + spacing scale — stepped at Bootstrap 5's own grid
   breakpoints (sm 576, md 768, lg 992, xxl 1400) plus a 1920px Full HD
   tier, so this scale always shifts tier in step with Bootstrap's own
   responsive classes/container. xl (1200) isn't listed separately below
   since its values are the same as lg (992) — they carry forward via
   the cascade. */
@media (min-width: 576px) {
	:root {
		--fs-caption: 0.775rem;
		--fs-small: 0.838rem;
		--fs-body: 1.031rem;
		--fs-body-large: 1.188rem;
		--fs-heading-6: 1.25rem;
		--fs-heading-5: 1.438rem;
		--fs-heading-4: 1.75rem;
		--fs-heading-3: 2.125rem;
		--fs-heading-2: 2.625rem;
		--fs-heading-1: 3.375rem;
		--fs-display: 4.125rem;
		--spacing-10: 0.275rem;
		--spacing-20: 0.55rem;
		--spacing-30: 0.825rem;
		--spacing-40: 1.1rem;
		--spacing-50: 1.65rem;
		--spacing-60: 2.2rem;
		--spacing-70: 3.3rem;
		--spacing-80: 4.4rem;
		--spacing-90: 6.6rem;
		--spacing-100: 8.8rem;
	}
}

@media (min-width: 768px) {
	:root {
		--fs-caption: 0.788rem;
		--fs-small: 0.85rem;
		--fs-body: 1.047rem;
		--fs-body-large: 1.219rem;
		--fs-heading-6: 1.313rem;
		--fs-heading-5: 1.531rem;
		--fs-heading-4: 1.875rem;
		--fs-heading-3: 2.313rem;
		--fs-heading-2: 2.938rem;
		--fs-heading-1: 3.813rem;
		--fs-display: 4.813rem;
		--spacing-10: 0.288rem;
		--spacing-20: 0.575rem;
		--spacing-30: 0.863rem;
		--spacing-40: 1.15rem;
		--spacing-50: 1.725rem;
		--spacing-60: 2.3rem;
		--spacing-70: 3.45rem;
		--spacing-80: 4.6rem;
		--spacing-90: 6.9rem;
		--spacing-100: 9.2rem;
	}
}

@media (min-width: 992px) {
	:root {
		--fs-caption: 0.8125rem;
		--fs-small: 0.875rem;
		--fs-body: 1.0625rem;
		--fs-body-large: 1.25rem;
		--fs-heading-6: 1.375rem;
		--fs-heading-5: 1.625rem;
		--fs-heading-4: 2rem;
		--fs-heading-3: 2.5rem;
		--fs-heading-2: 3.25rem;
		--fs-heading-1: 4.25rem;
		--fs-display: 5.5rem;
		--spacing-10: 0.3rem;
		--spacing-20: 0.6rem;
		--spacing-30: 0.9rem;
		--spacing-40: 1.2rem;
		--spacing-50: 1.8rem;
		--spacing-60: 2.4rem;
		--spacing-70: 3.6rem;
		--spacing-80: 4.8rem;
		--spacing-90: 7.2rem;
		--spacing-100: 9.6rem;
	}
}

@media (min-width: 1400px) {
	:root {
		--fs-caption: 0.861rem;
		--fs-small: 0.928rem;
		--fs-body: 1.126rem;
		--fs-body-large: 1.325rem;
		--fs-heading-6: 1.458rem;
		--fs-heading-5: 1.723rem;
		--fs-heading-4: 2.12rem;
		--fs-heading-3: 2.65rem;
		--fs-heading-2: 3.445rem;
		--fs-heading-1: 4.505rem;
		--fs-display: 5.83rem;
		--spacing-10: 0.325rem;
		--spacing-20: 0.65rem;
		--spacing-30: 0.975rem;
		--spacing-40: 1.3rem;
		--spacing-50: 1.95rem;
		--spacing-60: 2.6rem;
		--spacing-70: 3.9rem;
		--spacing-80: 5.2rem;
		--spacing-90: 7.8rem;
		--spacing-100: 10.4rem;
	}
}

@media (min-width: 1900px) {
	:root {
		--fs-caption: 0.91rem;
		--fs-small: 0.98rem;
		--fs-body: 1.19rem;
		--fs-body-large: 1.4rem;
		--fs-heading-6: 1.54rem;
		--fs-heading-5: 1.82rem;
		--fs-heading-4: 2.24rem;
		--fs-heading-3: 2.8rem;
		--fs-heading-2: 3.64rem;
		--fs-heading-1: 4.76rem;
		--fs-display: 6.16rem;
		--spacing-10: 0.35rem;
		--spacing-20: 0.7rem;
		--spacing-30: 1.05rem;
		--spacing-40: 1.4rem;
		--spacing-50: 2.1rem;
		--spacing-60: 2.8rem;
		--spacing-70: 4.2rem;
		--spacing-80: 5.6rem;
		--spacing-90: 8.4rem;
		--spacing-100: 11.2rem;
	}
}

/* Content width container — fixed (not percentage) gutters so the visible
   content area doesn't shrink as the viewport grows past max-width; the
   cap itself widens on very large screens instead of leaving a fixed 1200px
   box stranded in the middle of a 1920px+ viewport. Breakpoints match
   Bootstrap's own grid tiers (md/lg/xxl). */
.container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--spacing-40);
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--spacing-60);
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 1200px;
	}
}


@media (min-width: 1480px) {
	.container {
		max-width: 1440px;
	}
}

@media (min-width: 1900px) {
	.container {
		max-width: 1620px;
	}
}

/* Buttons (replace the old is-style-outline / filled block-button classes) */
.btn-brand-orange {
	display: inline-block;
	background-color: var(--brand-orange);
	color: var(--white);
	font-weight: 600;
	padding: 0.80rem 2.5rem;
	border-radius: 7px;
	text-decoration: none;
	border: 1.5px solid var(--brand-orange);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-brand-orange:hover,
.btn-brand-orange:focus-visible {
	background-color: var(--brand-navy);
	border-color: var(--brand-navy);
	color: var(--white);
}

.btn-outline-brand {
	display: inline-block;
	background-color: transparent;
	color: var(--brand-orange);
	font-weight: 600;
	padding: 0.80rem 2.5rem;
	border-radius: 7px;
	text-decoration: none;
	border: 1.5px solid var(--brand-orange);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus-visible {
	background-color: var(--brand-orange);
	border-color: var(--brand-orange);
	color: var(--white);
	box-shadow: 0 0 0 2px rgba(242, 102, 51, 0.2);
	text-decoration: none;
}

.btn-outline-brand:focus-visible {
	outline: 2px solid var(--brand-orange);
	outline-offset: 2px;
}

.btn-outline-brand-navy {
	display: inline-block;
	background-color: transparent;
	color: var(--brand-navy);
	font-weight: 600;
	padding: 0.80rem 2.5rem;
	border-radius: 7px;
	text-decoration: none;
	border: 2px solid var(--brand-navy);
}

.btn-outline-brand-navy:hover,
.btn-outline-brand-navy:focus-visible {
	background-color: var(--brand-navy);
	color: var(--white);
}

.btn-outline-brand-navy-sm {
	display: inline-block;
	background-color: transparent;
	color: var(--brand-navy);
	font-weight: 600;
	font-size: var(--fs-small);
	padding: 0.45rem 1.1rem;
	border-radius: 7px;
	text-decoration: none;
	border: 1.5px solid var(--brand-navy);
}

.btn-outline-brand-navy-sm:hover,
.btn-outline-brand-navy-sm:focus-visible {
	background-color: var(--brand-navy);
	color: var(--white);
}

.btn-brand-white {
	display: inline-block;
	background-color: var(--white);
	color: var(--blue-medium);
	font-weight: 600;
	padding: 0.80rem 2.5rem;
	border-radius: 7px;
	text-decoration: none;
	border: 1.5px solid var(--white);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-brand-white:hover,
.btn-brand-white:focus-visible {
	background-color: transparent;
	border-color: var(--white);
	color: var(--white);
}

.btn-brand-blue {
	display: inline-block;
	background-color: var(--blue-medium);
	color: var(--white);
	font-weight: 600;
	padding: 0.80rem 2.5rem;
	border-radius: 7px;
	text-decoration: none;
	border: 1.5px solid var(--blue-medium);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-brand-blue:hover,
.btn-brand-blue:focus-visible {
	background-color: var(--brand-navy);
	border-color: var(--brand-navy);
	color: var(--white);
}