/**
 * ELNOVIQ global design tokens and reusable utilities.
 *
 * Mobile styles are the default. The architecture uses one shared layout
 * breakpoint to keep responsive behavior predictable.
 */

:root {
	--eln-navy: #0B2D45;
	--eln-teal: #00B4B6;
	/* Use accessible teal for text/light backgrounds and white-text controls. */
	--eln-teal-accessible: #00777B;
	--eln-teal-accessible-hover: #006C6E;
	--eln-background: #F4F9FB;
	--eln-text: #333333;
	--eln-white: #FFFFFF;
	--eln-container: 75rem;
	--eln-gutter-mobile: 1rem;
	--eln-gutter-desktop: 2rem;
	--eln-radius-sm: 0.375rem;
	--eln-radius-md: 0.75rem;
	--eln-radius-lg: 1.25rem;
	--eln-shadow-card: 0 0.75rem 2rem rgba(11, 45, 69, 0.1);
	--eln-section-space-mobile: 3.5rem;
	--eln-section-space-desktop: 5rem;
}

.eln-container {
	box-sizing: border-box;
	width: min(100%, calc(var(--eln-container) + (2 * var(--eln-gutter-mobile))));
	margin-inline: auto;
	padding-inline: var(--eln-gutter-mobile);
}

.eln-section {
	box-sizing: border-box;
	padding-block: var(--eln-section-space-mobile);
	color: var(--eln-text);
}

.eln-card {
	box-sizing: border-box;
	padding: 1.5rem;
	border: 1px solid rgba(11, 45, 69, 0.12);
	border-radius: var(--eln-radius-md);
	background-color: var(--eln-white);
	box-shadow: var(--eln-shadow-card);
	color: var(--eln-text);
}

.eln-button {
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	padding: 0.75rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--eln-radius-sm);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	touch-action: manipulation;
}

.eln-button:focus-visible {
	outline: 3px solid var(--eln-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--eln-navy);
}

.eln-button--primary {
	border-color: var(--eln-navy);
	background-color: var(--eln-navy);
	color: var(--eln-white);
}

.eln-button--primary:hover {
	box-shadow: 0 0.5rem 1.25rem rgba(11, 45, 69, 0.22);
	color: var(--eln-white);
}

.eln-button--secondary {
	border-color: var(--eln-navy);
	background-color: var(--eln-white);
	color: var(--eln-navy);
}

.eln-button--secondary:hover {
	background-color: var(--eln-background);
	color: var(--eln-navy);
}

@media (min-width: 48rem) {
	.eln-container {
		width: min(100%, calc(var(--eln-container) + (2 * var(--eln-gutter-desktop))));
		padding-inline: var(--eln-gutter-desktop);
	}

	.eln-section {
		padding-block: var(--eln-section-space-desktop);
	}

	.eln-card {
		padding: 2rem;
	}
}