/* Global application styles */
@import '/static/styles/components/card.css';
@import '/static/styles/components/controls.css';
@import '/static/styles/components/footer.css';
@import '/static/styles/components/header.css';
@import '/static/styles/components/notifications.css';
@import '/static/styles/components/app-layout.css';
@import '/static/styles/components/help-modal.css';

/* Global variables - Tech Minimalist Palette */
:root {
	/* Primary Colors */
	--primary-color: #445d7e;
	--secondary-color: #5a77a1;
	--accent-color: #3b82f6;
	--accent-color-hover: #2563eb;

	/* Text Colors */
	--text-primary: #374151;
	--text-secondary: #737373;

	/* Background Colors */
	--bg-light: #f9fafb;
	--bg-sections: #e2e8f0;
	--bg-dark: #10192a;
	--text-light: #f1f5f9;

	/* Card colors - GitHub theme inspired */
	--border-color: #3b82f6;
	--bg-color: #10192a;

	/* Typography */
	--primary-font: 'Roboto', sans-serif;
	--secondary-font: 'Segoe UI', 'Open Sans', sans-serif;

	/* UI Elements */
	--danger-color: #ef4444;
	--danger-color-hover: #dc2626;
	--success-color: #10b981;
	--warning-color: #f59e0b;
	--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.3s ease;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
}

/* Global reset styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--primary-font);
}

/* Base body styles */
body {
	background-color: var(--bg-light);
	color: var(--text-primary);
	line-height: 1.6;
	font-size: 16px;
}

/* Main container */
.container {
	margin: 0 auto;
}

/* Main layout (generator and preview) */
.generator {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

/* Global animations */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s ease-out;
}

.animate-on-scroll.appear {
	opacity: 1;
	transform: translateY(0);
}

/* Form elements */
input,
textarea,
select {
	padding: 0.6rem 0.8rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 0.95rem;
	background-color: white;
	color: var(--text-primary);
	transition: var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.form-group {
	margin-bottom: 1.2rem;
}

/* Section titles */
.section-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--primary-color);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Global media queries */
@media (max-width: 768px) {
	.generator {
		flex-direction: column;
	}

	.container {
		padding: var(--space-md);
	}
}