/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
	/* Primary colors */
	--md-primary-fg-color: #16293F;
	--md-primary-fg-color--light: #16293F;
	--md-primary-fg-color--dark: #16293F;
	--md-accent-fg-color: #FC764C;
	--md-accent-fg-color--transparent: #FC764C33;
	--md-accent-bg-color: #FFFFFF;
	--md-accent-bg-color--light: #FFFFFF;
	--card-bg-color-light: #d7d4d4 ;

	/* Secondary colors */
	--secondary-color-1: #FC9D4C;
	--secondary-color-2: #FCDA4C;

	/* Hero header gradient colors - easy to change */
	--hero-gradient-start: #16293F;
	--hero-gradient-end: #1A3A5F;

	/* What's new section background */
	--whats-new-bg-color: #16293F;

	/* Font settings */
	--md-text-font: "Poppins", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	--md-code-font: "Roboto Mono", SFMono-Regular, Consolas, Menlo, monospace;
}

/* Primary button - uses gradient like the logo */
.md-button.md-button--primary {
	background: linear-gradient(135deg, #16293F 0%, #0f1d2e 100%);
	color: white;
	border: 1px solid #D3D6E0;
}
/* Primary button hover state */
.md-button.md-button--primary:hover {
	background: linear-gradient(135deg, #16293F 0%, #0f1d2e 90%);
	box-shadow: 0 4px 8px rgba(26, 41, 62, 0.2);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(26, 41, 62, 0.1);
	border: 1px solid #D3D6E0;
}

/* Primary button active/pressed state */
.md-button.md-button--primary:active {
	background: #16293F;
	box-shadow: 0 1px 2px rgba(26, 41, 62, 0.2);
	transform: translateY(1px);
}

/* Secondary button (default) */
.md-button:not(.md-button--primary) {
	background-color: #16293F;
	/* Cloud color */
	color: #FFFFFF;
	/* Dark navy */
	border: 1px solid #D3D6E0;
	/* Smoke color */
}

/* Secondary button hover */
.md-button:not(.md-button--primary):hover {
	background-color: #16293F;
	box-shadow: 0 4px 8px rgba(26, 41, 62, 0.15);
	transform: translateY(-1px);
	border: 1px solid #D3D6E0;
}

/* Secondary button active/pressed */
.md-button:not(.md-button--primary):active {
	background-color: #BCBFCC;
	/* Steel color */
	box-shadow: 0 1px 2px rgba(26, 41, 62, 0.1);
	transform: translateY(1px);
}

/* Focus states for accessibility */
.md-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(105, 34, 217, 0.3);
}

/* Disabled state for all buttons */
.md-button:disabled,
.md-button--disabled {
	background-color: #D3D6E0 !important;
	/* Smoke color */
	color: #9DA2B3 !important;
	/* Space color */
	cursor: not-allowed;
	box-shadow: none !important;
	transform: none !important;
	border: 1px solid #BCBFCC !important;
	/* Steel color */
}

/* Icon handling within buttons */
.md-button .md-icon {
	margin-right: 0.5rem;
	vertical-align: middle;
}

/* Small variant if needed */
.md-button--small {
	padding: 0.4rem 0.8rem;
	font-size: 0.875rem;
}

/* Large variant if needed */
.md-button--large {
	padding: 0.75rem 1.5rem;
	font-size: 1.1rem;
}