/* ==============================================================================================
	theme.css		This is my theme css
=============================================================================================== */

:root {
	--font-1-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-2-subheading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-3-body: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-4-script: 'Courgette', cursive;
	--font-5-script: 'Dancing Script', cursive;

	--color-1: #003480;
	--color-2: #006eba;
	--color-3: #5fbee5;
	--color-4: #e3eff8;

	--accent-1: #ff8200;
	--accent-2: #ffb400;
	--accent-3: #ffef00;
	--accent-4: #fffeaa;

	--shade-1: #060d30;
	--shade-2: #2e3651;
	--shade-3: #5b6475;
	--shade-4: #cccccc;

	--light-1: #ffffff;
	--light-2: #f6fafd;

	--red-1: #bf0000;
	--red-2: #ff0000;
	--red-3: #ff3300;

	--bg-1: #f5f7fb;
	--bg-2: #edf4fa;
	--bg-footer: #00408c;

/* --------------------------------------------------
	GRADIENT 1		Clean horizontal brand gradient
	Best for:		buttons, headers, navbars, CTA strips
-------------------------------------------------- */

	--gradient-1: linear-gradient(
		90deg,
		var(--color-1) 0%,
		var(--color-2) 100%
	);

/* --------------------------------------------------
	GRADIENT 2		Smooth premium blend
	Best for:		hero sections, cards, feature panels
-------------------------------------------------- */

	--gradient-2: linear-gradient(
		135deg,
		var(--color-1) 0%,
		color-mix(in srgb, var(--color-1), var(--color-2) 50%) 45%,
		var(--color-2) 100%
	);

/* --------------------------------------------------
   GRADIENT 3		Soft atmospheric gradient
   Best for:		page backgrounds, large sections, footer areas
-------------------------------------------------- */

	--gradient-3:
		radial-gradient(
			circle at top left,
			color-mix(in srgb, var(--color-3), white 35%) 0%,
			transparent 40%
		),

		radial-gradient(
			circle at bottom right,
			color-mix(in srgb, var(--color-1), black 10%) 0%,
			transparent 45%
		),

		linear-gradient(
			180deg,
			var(--bg-1) 0%,
			var(--bg-2) 100%
		);			   

/* --------------------------------------------------
   GRADIENT 4      Warm accent glow gradient
   Best for:       hero sections, call-to-action areas,
                   feature blocks, landing page headers
-------------------------------------------------- */

--gradient-4:
	radial-gradient(
		circle at top left,
		color-mix(in srgb, var(--accent-1), white 25%) 0%,
		transparent 35%
	),

	radial-gradient(
		circle at top right,
		color-mix(in srgb, var(--accent-2), white 20%) 0%,
		transparent 40%
	),

	radial-gradient(
		circle at bottom center,
		color-mix(in srgb, var(--accent-3), white 15%) 0%,
		transparent 45%
	),

	linear-gradient(
		135deg,
		var(--bg-1) 0%,
		var(--bg-2) 100%
	);

/* --------------------------------------------------
   GRADIENT 5      Brand + Accent Fusion
   Best for:       Hero sections, featured content,
                   premium call-to-action areas
-------------------------------------------------- */

--gradient-5:
	radial-gradient(
		circle at top left,
		color-mix(in srgb, var(--color-3), white 20%) 0%,
		transparent 40%
	),

	radial-gradient(
		circle at top right,
		color-mix(in srgb, var(--accent-1), white 25%) 0%,
		transparent 35%
	),

	radial-gradient(
		circle at bottom left,
		color-mix(in srgb, var(--accent-3), white 15%) 0%,
		transparent 45%
	),

	linear-gradient(
		135deg,
		var(--color-1) 0%,
		var(--color-2) 45%,
		var(--color-3) 100%
	);

/* --------------------------------------------------
   GRADIENT		END
-------------------------------------------------- */

	--radius: 24px;
	--radius-xl: 32px;

	--shadow:
		0 6px 16px rgba(9, 37, 77, 0.18),
		0 14px 36px rgba(9, 37, 77, 0.10);

	--shadow-btn: 0 6px 14px rgba(0, 0, 0, 0.18);

	--shadow-btn-hover: 0 12px 24px rgba(0, 0, 0, 0.22);

	--shadow-btn-xl:
		0 4px 8px rgba(0, 0, 0, 0.18),
		0 10px 25px rgba(0, 0, 0, 0.20);

	--shadow-btn-xl-hover:
		0 6px 12px rgba(0, 0, 0, 0.20),
		0 14px 32px rgba(0, 0, 0, 0.22);
}