/* ============================================================
   A2Z CARD MAKER - COLOR THEME VARIABLES
   Enhanced Elegant Rose Theme - 2026
   ============================================================ */

:root {
	/* Primary Colors - Elegant Dusty Rose */
	--primary: #9f5860;
	--primary-light: #c17179;
	--primary-dark: #7d3f46;
	--primary-rgb: 159, 88, 96;
	
	/* Secondary Colors - Soft Teal (Complementary) */
	--secondary: #5f9f98;
	--secondary-light: #7db8b1;
	--secondary-dark: #4a7d77;
	--secondary-rgb: 95, 159, 152;
	
	/* Accent Colors - Warm Gold & Peach */
	--accent: #d4a574;
	--accent-light: #e3c09a;
	--accent-dark: #b8895c;
	--accent-gold: #e8c292;
	--accent-rgb: 212, 165, 116;
	
	/* Neutral Colors */
	--background: #F8F9FA;
	--background-dark: #E9ECEF;
	--surface: #FFFFFF;
	--surface-hover: #F8F9FA;
	
	/* Text Colors */
	--text-primary: #2B2D42;
	--text-secondary: #6C757D;
	--text-muted: #ADB5BD;
	--text-light: #DEE2E6;
	
	/* Border & Divider */
	--border: #E0E0E0;
	--border-light: #F0F0F0;
	--border-dark: #CED4DA;
	
	/* Status Colors */
	--success: #06D6A0;
	--warning: #FFD166;
	--error: #EF476F;
	--info: #118AB2;
	
	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
	--shadow-primary: 0 4px 12px rgba(159, 88, 96, 0.3);
	--shadow-primary-lg: 0 6px 16px rgba(159, 88, 96, 0.4);
	
	/* Gradients */
	--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	--gradient-primary-reverse: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
	--gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
	--gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-gold) 100%);
	--gradient-warm: linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
	
	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 25px;
	--radius-circle: 50%;
	
	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;
	
	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
	
	/* Z-index layers */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
}

/* Dark mode support (optional for future) */
@media (prefers-color-scheme: dark) {
	:root {
		--background: #1A1D29;
		--surface: #252936;
		--text-primary: #F8F9FA;
		--text-secondary: #ADB5BD;
		--border: #3A3F51;
	}
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Background Colors */
.bg-primary { background-color: var(--primary) !important; }
.bg-primary-light { background-color: var(--primary-light) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-accent { background-color: var(--accent) !important; }
.bg-surface { background-color: var(--surface) !important; }

/* Text Colors */
.text-primary-color { color: var(--primary) !important; }
.text-secondary-color { color: var(--secondary) !important; }
.text-accent { color: var(--accent) !important; }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-secondary { background: var(--gradient-secondary) !important; }
.bg-gradient-accent { background: var(--gradient-accent) !important; }

/* Shadows */
.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-primary-lg { box-shadow: var(--shadow-primary-lg) !important; }

/* Border Radius */
.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }

/* ============================================================
   COMPREHENSIVE SEO FOOTER - DUSTY ROSE THEME
   ============================================================ */

/* Main Footer Container */
.footer-main {
	background: linear-gradient(180deg, #2B2D42 0%, #1A1D29 100%);
	color: #E9ECEF;
	margin-top: auto;
}

/* Footer Top Section - 4 Columns */
.footer-top {
	border-bottom: 1px solid rgba(159, 88, 96, 0.3);
}

.footer-heading {
	color: white;
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 3px solid var(--primary);
	display: inline-block;
	position: relative;
}

.footer-heading::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 50%;
	height: 3px;
	background: var(--accent-gold);
}

.footer-text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.footer-logo-tagline {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.85rem;
	font-style: italic;
}

.footer-logo-tagline .text-rose {
	color: var(--primary-light);
	font-size: 1rem;
}

/* Footer Links */
.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 0.6rem;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
}

.footer-links a i {
	color: var(--primary-light);
	font-size: 0.75rem;
	margin-right: 0.5rem;
	transition: all 0.3s ease;
}

.footer-links a:hover {
	color: white;
	padding-left: 0.5rem;
}

.footer-links a:hover i {
	color: var(--accent-gold);
	margin-right: 0.75rem;
}

/* Footer Contact */
.footer-contact {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-contact li {
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
}

.footer-contact i {
	color: var(--primary-light);
	font-size: 1rem;
	margin-right: 0.75rem;
	min-width: 20px;
}

.footer-contact a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}

.footer-contact a:hover {
	color: white;
	padding-left: 0.25rem;
}

/* Social Icons */
.footer-social {
	display: flex;
	gap: 0.75rem;
}

.social-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(159, 88, 96, 0.2);
	border: 2px solid var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-light);
	font-size: 1.1rem;
	transition: all 0.3s ease;
	text-decoration: none;
}

.social-icon:hover {
	background: var(--gradient-primary);
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(159, 88, 96, 0.4);
}

/* Newsletter Section */
.footer-newsletter {
	background: rgba(159, 88, 96, 0.1);
	border-bottom: 1px solid rgba(159, 88, 96, 0.3);
}

.newsletter-heading {
	color: white;
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 0;
}

.newsletter-heading i {
	color: var(--primary-light);
}

.newsletter-text {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
}

.newsletter-form .form-control {
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(159, 88, 96, 0.3);
	color: white;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	border-radius: 8px 0 0 8px;
}

.newsletter-form .form-control::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.newsletter-form .form-control:focus {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--primary);
	color: white;
	box-shadow: 0 0 0 0.25rem rgba(159, 88, 96, 0.25);
}

.newsletter-form .btn-rose {
	background: var(--gradient-primary);
	border: none;
	color: white;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	border-radius: 0 8px 8px 0;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.newsletter-form .btn-rose:hover {
	background: var(--gradient-primary-reverse);
	transform: translateX(2px);
	box-shadow: 0 4px 12px rgba(159, 88, 96, 0.4);
}

/* Footer Bottom Section */
.footer-bottom {
	background: rgba(0, 0, 0, 0.3);
}

.footer-copyright {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
}

.footer-copyright strong {
	color: var(--primary-light);
	font-weight: 600;
}

.footer-legal {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.footer-legal li {
	display: inline-flex;
	align-items: center;
}

.footer-legal li:not(:last-child)::after {
	content: "•";
	color: var(--primary-light);
	margin-left: 0.5rem;
	font-weight: bold;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.85rem;
	transition: all 0.3s ease;
}

.footer-legal a:hover {
	color: var(--primary-light);
}

/* Responsive Design */
@media (max-width: 991px) {
	.footer-heading {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	
	.footer-top {
		padding: 2rem 0 !important;
	}
	
	.newsletter-form .input-group {
		flex-direction: column;
	}
	
	.newsletter-form .form-control,
	.newsletter-form .btn-rose {
		border-radius: 8px;
		width: 100%;
	}
	
	.newsletter-form .btn-rose {
		margin-top: 0.5rem;
	}
}

@media (max-width: 767px) {
	/* Center all footer content on mobile */
	.footer-top .col-lg-3,
	.footer-top .col-md-6 {
		text-align: center;
	}
	
	.footer-heading {
		display: block;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	
	.footer-text {
		text-align: center;
	}
	
	.footer-logo-tagline {
		justify-content: center;
		display: flex;
		align-items: center;
	}
	
	.footer-links {
		text-align: center;
	}
	
	.footer-links li {
		display: flex;
		justify-content: center;
	}
	
	.footer-links a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	.footer-contact {
		text-align: center;
	}
	
	.footer-contact li {
		justify-content: center;
	}
	
	.footer-social {
		justify-content: center;
		margin-top: 1rem;
	}
	
	.footer-newsletter .col-lg-6 {
		text-align: center;
	}
	
	.newsletter-heading {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.newsletter-text {
		text-align: center;
	}
	
	.footer-legal {
		justify-content: center;
		margin-top: 1rem;
	}
	
	.footer-copyright {
		text-align: center !important;
	}
}