/**
 * Inadev 2026 — design tokens.
 *
 * Replaces the former theme.json settings (classic theme has no block
 * global-styles engine). Values are unchanged from the previous palette,
 * type scale, and spacing scale so the visual design does not regress.
 */

@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-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-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 (unchanged slugs from the former preset spacingSizes) */
	--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(--brand-navy);
}

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-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; }

/* Content width container matching the former theme.json contentSize (1200px) */
.container {
	padding-inline: 8%;
}

@media (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}
}

/* 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.7rem 1.5rem;
	border-radius: 6px;
	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.7rem 1.5rem;
	border-radius: 6px;
	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.7rem 1.5rem;
	border-radius: 6px;
	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: 6px;
	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(--brand-navy);
	font-weight: 600;
	padding: 0.7rem 1.5rem;
	border-radius: 6px;
	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.7rem 1.5rem;
	border-radius: 6px;
	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);
}
