/* ==================== Color Palette ==================== */
@import url("https://fonts.cdnfonts.com/css/techna-sans");
@import url("https://fonts.cdnfonts.com/css/Poppins");

:root {

	--color-primary: #003A62;
	--color-primary-hover: #002d4d;
	--color-primary-muted: #1e6ea7;

	--color-secondary: #76BF4D;  
	--color-secondary-hover: #669e00;
	--color-secondary-muted: #a6c86c;

	--color-tertiary: #FFD92B;
	--color-tertiary-hover: #e6c200;
	--color-tertiary-muted: #ffe066;

	--color-accent: #3d4f58;
	--color-accent-light: #5c6c75;

	--color-surface: #ffffff;
	--color-surface-alt: #f4fcea;
	--color-border: #dee2e6;

	--color-text: #333132;
	--color-text-muted: #808080;

	--color-danger: #dc3545;
	--color-danger-hover: #b22433;

	--font-family-base: 'Poppins', sans-serif;
	--font-family-heading: 'Techna Sans', sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
}

/* ==================== Button Variants ==================== */
.btn-primary {
	background-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--color-primary-hover);
}

.btn-secondary {
	background-color: #ffffff;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background-color: var(--color-surface-alt);
}

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

.btn-outline:hover,
.btn-outline:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-danger {
	background-color: var(--color-danger);
}

.btn-danger:hover,
.btn-danger:focus-visible {
	background-color: var(--color-danger-hover);
}

/* ==================== Button Sizes ==================== */
.btn-sm {
	padding: 0.5rem 1.25rem;
	font-size: 0.75rem;
	border-radius: 0.4rem;
}

.btn-lg {
	padding: 0.75rem 2rem;
	font-size: 1rem;
	border-radius: 0.6rem;
}

/* ==================== Typography Utilities ==================== */
.font-base {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	color: var(--color-text);
}

.font-heading {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.heading-xl {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.heading-lg {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
}

.text-sm {
	font-size: var(--font-size-sm);
}

.text-xs {
	font-size: var(--font-size-xs);
}

.text-muted {
	color: var(--color-text-muted);
}