@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
/* Note: Tailwind CSS is processed via src/app.css through PostCSS - do not add @import "tailwindcss" here */

:root {
	/* Footer specific HSL colors */
	--background: 210 20% 98%;
	--foreground: 220 20% 10%;

	/* Muted colors for Tailwind compatibility */
	--muted: 220 14% 96%;
	--muted-foreground: 220 9% 46%;
	--border: 220 13% 91%;
	--color-border: rgba(255, 255, 255, 0.1);

	/* Color Palette */
	--white: #FFFFFF;
	--midnight-navy: #1C1B4B;
	--deep-sapphire: #221573;
	--severe-blue: #201D6B;
	--darkest-blue: #1E3A8A;
	--dark-blue: #1D4ED8;
	--primary-blue: #3B82F6;
	--bedazzled-blue: #3D5A80;
	--secondary-blue: #6888BE;
	--medium-blue: #219EBC;
	--deep-ocean: #023047;
	--light-blue: #98C1D9;
	--neon-cyan: #22D3EE;
	--bright-pink: #EC4899;
	--button-red: #FF1F5C;
	--imperial-red: #EF233C;
	--darker-red: #D90429;
	--worst-red: #59080B;
	--secondary-purple: #A78BFA;
	--social-purple: #8B5CF6;
	--dark-background: #0F172A;
	--black: #000000;

	/* Specific Color Variables */
	--color-white-solid: #FFFFFF;
	--color-white-75: rgba(255, 255, 255, 0.75);
	--color-white-58: rgba(255, 255, 255, 0.58);
	--color-white-30: rgba(255, 255, 255, 0.30);
	--color-white-20: rgba(255, 255, 255, 0.20);
	--color-white-12: rgba(255, 255, 255, 0.12);
	--color-white-10: rgba(255, 255, 255, 0.10);
	--color-white-8: rgba(255, 255, 255, 0.08);
	--color-white-5: rgba(255, 255, 255, 0.05);
	
	--color-azure-27: #233C67;
	--color-blue-21: #242349;
	--color-azure-58: #6888BE;
	--color-violet-38: #4F378B;
	--color-azure-11: #0F172A;
	--color-black-solid: #000000;
	--color-black-70: rgba(0, 0, 0, 0.70);
	--color-azure-27-80: rgba(35, 60, 103, 0.80);

	/* Typography */
	--font-family-poppins: 'Poppins', sans-serif;
	--font-family-montserrat: 'Montserrat', sans-serif;
	--font-family-open-sans: 'Open Sans', sans-serif;
	--font-family-sf-pro: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-family-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	
	--font-size-48: 48px;
	--font-size-18: 18px;
	--font-size-14: 14px;
	--font-weight-700: 700;
	--font-weight-600: 600;
	--font-weight-400: 400;
	--line-height-57_6: 57.6px;
	--line-height-30_6: 30.6px;
	--line-height-28_16: 28.16px;
	--line-height-22_4: 22.4px;
	--letter-spacing-0_5: 0.5px;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-family-open-sans);
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	color: var(--color-white-solid);
	background: hsl(220, 20%, 10%);
	min-height: 100vh;
	transition: all 0.3s ease;
}

/* Light Mode Styles */
body.light-mode {
	color: #0F172A;
	background: #ffffff;

	/* Light mode muted colors */
	--muted: 270 20% 96%;
	--muted-foreground: 270 9% 40%;
	--border: 270 13% 85%;
	--color-border: rgba(0, 0, 0, 0.08);

	/* Light mode specific colors */
	--light-card-bg: #ECF0F3;
	--light-secondary-card-bg: #EDF1F4;
	--light-button-bg: #000000;
	--light-primary-button-text: #EBE4FD;
	--light-secondary-button-bg: #1C1B4B;
	--light-secondary-button-text: #ffffff;
	--light-header-text: #000000;
	--light-body-text: #1C1B4B;
	
	/* Light mode shadows */
	--light-card-shadow: 
		16px 16px 32px 0px #D1D9E6,
		-16px -16px 32px 0px #ffffff;
	--light-secondary-shadow: 
		-24px -32px 0px 0px rgba(13, 39, 80, 0.18),
		24px 32px 0px 0px rgba(13, 39, 80, 0.18);
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	font-size: inherit;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
}