/**
 * Design System Frontend Styles
 *
 * Applies global design system variables to frontend elements.
 *
 * @package Starter_Flavor
 * @since 1.0.0
 */

/* Typography */
h1 {
	font-family: var(--sf-h1-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-h1-size, 48px);
	font-weight: var(--sf-h1-weight, 700);
	line-height: var(--sf-h1-line-height, 1.2);
	letter-spacing: var(--sf-h1-letter-spacing, -0.02em);
	text-transform: var(--sf-h1-transform, none);
	color: var(--sf-color-heading, #0f172a);
	margin-bottom: var(--sf-space-lg, 24px);
}

h2 {
	font-family: var(--sf-h2-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-h2-size, 36px);
	font-weight: var(--sf-h2-weight, 700);
	line-height: var(--sf-h2-line-height, 1.3);
	letter-spacing: var(--sf-h2-letter-spacing, -0.01em);
	color: var(--sf-color-heading, #0f172a);
	margin-bottom: var(--sf-space-md, 16px);
}

h3 {
	font-family: var(--sf-h3-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-h3-size, 28px);
	font-weight: var(--sf-h3-weight, 600);
	line-height: var(--sf-h3-line-height, 1.4);
	color: var(--sf-color-heading, #0f172a);
	margin-bottom: var(--sf-space-md, 16px);
}

h4 {
	font-family: var(--sf-h4-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-h4-size, 24px);
	font-weight: var(--sf-h4-weight, 600);
	line-height: var(--sf-h4-line-height, 1.4);
	color: var(--sf-color-heading, #0f172a);
	margin-bottom: var(--sf-space-sm, 8px);
}

h5 {
	font-family: var(--sf-h5-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-h5-size, 20px);
	font-weight: var(--sf-h5-weight, 600);
	line-height: var(--sf-h5-line-height, 1.5);
	color: var(--sf-color-heading, #0f172a);
	margin-bottom: var(--sf-space-sm, 8px);
}

h6 {
	font-family: var(--sf-h6-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-h6-size, 16px);
	font-weight: var(--sf-h6-weight, 600);
	line-height: var(--sf-h6-line-height, 1.6);
	color: var(--sf-color-heading, #0f172a);
	margin-bottom: var(--sf-space-sm, 8px);
}

p {
	font-family: var(--sf-body-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-body-size, 16px);
	font-weight: var(--sf-body-weight, 400);
	line-height: var(--sf-body-line-height, 1.6);
	color: var(--sf-color-text, #1e293b);
	margin-bottom: var(--sf-space-md, 16px);
}

small {
	font-family: var(--sf-small-font-family, system-ui, -apple-system, sans-serif);
	font-size: var(--sf-small-size, 14px);
	font-weight: var(--sf-small-weight, 400);
	line-height: var(--sf-small-line-height, 1.5);
	color: var(--sf-color-text-light, #64748b);
}

/* Links */
a {
	color: var(--sf-color-link, #0369a1);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--sf-color-link, #0284c7);
	text-decoration: underline;
}

/* Buttons */
button,
.button,
[role="button"] {
	font-family: inherit;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
	font-weight: 600;
}

.btn-primary,
button.primary,
.button.primary {
	background-color: var(--sf-color-primary, #7c3aed);
	color: white;
	padding: var(--sf-space-md, 16px) var(--sf-space-lg, 24px);
	border-radius: var(--sf-radius-md, 8px);
	font-size: var(--sf-body-size, 16px);
}

.btn-primary:hover {
	background-color: #6d28d9;
	opacity: 0.9;
}

.btn-secondary,
button.secondary,
.button.secondary {
	background-color: var(--sf-color-surface, #f8fafc);
	color: var(--sf-color-text, #1e293b);
	border: 1px solid var(--sf-color-border, #e2e8f0);
	padding: var(--sf-space-md, 16px) var(--sf-space-lg, 24px);
	border-radius: var(--sf-radius-md, 8px);
	font-size: var(--sf-body-size, 16px);
}

.btn-secondary:hover {
	border-color: var(--sf-color-primary, #7c3aed);
	background-color: #f1f5f9;
}

.btn-outline {
	background-color: transparent;
	color: var(--sf-color-primary, #7c3aed);
	border: 1px solid var(--sf-color-primary, #7c3aed);
	padding: var(--sf-space-md, 16px) var(--sf-space-lg, 24px);
	border-radius: var(--sf-radius-md, 8px);
	font-size: var(--sf-body-size, 16px);
}

.btn-outline:hover {
	background-color: var(--sf-color-primary, #7c3aed);
	color: white;
}

/* Forms */
input,
textarea,
select {
	font-family: inherit;
	font-size: var(--sf-body-size, 16px);
	color: var(--sf-color-text, #1e293b);
	border: 1px solid var(--sf-color-border, #e2e8f0);
	border-radius: var(--sf-radius-md, 8px);
	padding: var(--sf-space-sm, 8px) var(--sf-space-md, 16px);
	transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--sf-color-primary, #7c3aed);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

textarea {
	resize: vertical;
	line-height: var(--sf-body-line-height, 1.6);
	min-height: 120px;
}

label {
	font-weight: 500;
	color: var(--sf-color-heading, #0f172a);
	margin-bottom: var(--sf-space-xs, 4px);
	display: block;
}

/* Container */
.container,
.wp-container-content {
	max-width: var(--sf-container-max-width, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sf-space-lg, 24px);
	padding-right: var(--sf-space-lg, 24px);
}

/* Section Padding */
section,
.section {
	padding: var(--sf-section-padding, 40px) 0;
}

/* Borders */
.border {
	border: 1px solid var(--sf-color-border, #e2e8f0);
	border-radius: var(--sf-radius-md, 8px);
}

.border-radius-sm {
	border-radius: var(--sf-radius-sm, 4px);
}

.border-radius-md {
	border-radius: var(--sf-radius-md, 8px);
}

.border-radius-lg {
	border-radius: var(--sf-radius-lg, 12px);
}

.border-radius-full {
	border-radius: var(--sf-radius-full, 9999px);
}

/* Shadows */
.shadow-sm {
	box-shadow: var(--sf-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.shadow-md {
	box-shadow: var(--sf-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.shadow-lg {
	box-shadow: var(--sf-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

.shadow-xl {
	box-shadow: var(--sf-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
}

/* Spacing Classes */
.p-0 { padding: 0; }
.p-xs { padding: var(--sf-space-xs, 4px); }
.p-sm { padding: var(--sf-space-sm, 8px); }
.p-md { padding: var(--sf-space-md, 16px); }
.p-lg { padding: var(--sf-space-lg, 24px); }
.p-xl { padding: var(--sf-space-xl, 32px); }
.p-2xl { padding: var(--sf-space-2xl, 48px); }
.p-3xl { padding: var(--sf-space-3xl, 64px); }

.m-0 { margin: 0; }
.m-xs { margin: var(--sf-space-xs, 4px); }
.m-sm { margin: var(--sf-space-sm, 8px); }
.m-md { margin: var(--sf-space-md, 16px); }
.m-lg { margin: var(--sf-space-lg, 24px); }
.m-xl { margin: var(--sf-space-xl, 32px); }
.m-2xl { margin: var(--sf-space-2xl, 48px); }
.m-3xl { margin: var(--sf-space-3xl, 64px); }

/* Gap */
.gap-sm { gap: var(--sf-space-sm, 8px); }
.gap-md { gap: var(--sf-space-md, 16px); }
.gap-lg { gap: var(--sf-space-lg, 24px); }
.gap-xl { gap: var(--sf-space-xl, 32px); }

/* Grid */
.grid {
	display: grid;
	gap: var(--sf-grid-gap, 16px);
}

.grid-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Flexbox */
.flex {
	display: flex;
	gap: var(--sf-grid-gap, 16px);
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-center {
	align-items: center;
	justify-content: center;
}

/* Colors */
.text-primary { color: var(--sf-color-primary, #7c3aed); }
.text-secondary { color: var(--sf-color-secondary, #06b6d4); }
.text-accent { color: var(--sf-color-accent, #ec4899); }
.text-muted { color: var(--sf-color-muted, #94a3b8); }
.text-error { color: var(--sf-color-error, #dc2626); }
.text-success { color: var(--sf-color-success, #16a34a); }
.text-warning { color: var(--sf-color-warning, #ea580c); }
.text-info { color: var(--sf-color-info, #0284c7); }

.bg-primary { background-color: var(--sf-color-primary, #7c3aed); color: white; }
.bg-secondary { background-color: var(--sf-color-secondary, #06b6d4); color: white; }
.bg-accent { background-color: var(--sf-color-accent, #ec4899); color: white; }
.bg-surface { background-color: var(--sf-color-surface, #f8fafc); }
.bg-muted { background-color: var(--sf-color-muted, #94a3b8); color: white; }

/* Responsive Typography */
@media (max-width: 768px) {
	h1 {
		font-size: var(--sf-h1-size-tablet, 36px);
	}

	h2 {
		font-size: var(--sf-h2-size-tablet, 28px);
	}

	h3 {
		font-size: var(--sf-h3-size-tablet, 24px);
	}

	h4 {
		font-size: var(--sf-h4-size-tablet, 20px);
	}

	h5 {
		font-size: var(--sf-h5-size-tablet, 18px);
	}

	h6 {
		font-size: var(--sf-h6-size-tablet, 16px);
	}

	p {
		font-size: var(--sf-body-size-tablet, 16px);
	}

	.grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: var(--sf-h1-size-mobile, 28px);
	}

	h2 {
		font-size: var(--sf-h2-size-mobile, 24px);
	}

	h3 {
		font-size: var(--sf-h3-size-mobile, 20px);
	}

	h4 {
		font-size: var(--sf-h4-size-mobile, 18px);
	}

	h5 {
		font-size: var(--sf-h5-size-mobile, 16px);
	}

	h6 {
		font-size: var(--sf-h6-size-mobile, 14px);
	}

	p {
		font-size: var(--sf-body-size-mobile, 14px);
	}

	section,
	.section {
		padding: var(--sf-space-lg, 24px) 0;
	}

	.container,
	.wp-container-content {
		padding-left: var(--sf-space-md, 16px);
		padding-right: var(--sf-space-md, 16px);
	}

	.grid-cols-2,
	.grid-cols-3,
	.grid-cols-4 {
		grid-template-columns: 1fr;
	}
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		--sf-color-text: #f1f5f9;
		--sf-color-text-light: #cbd5e1;
		--sf-color-heading: #f8fafc;
		--sf-color-background: #1e293b;
		--sf-color-surface: #0f172a;
		--sf-color-border: #475569;
		--sf-color-muted: #64748b;
	}

	body {
		background-color: var(--sf-color-background, #1e293b);
		color: var(--sf-color-text, #f1f5f9);
	}

	input,
	textarea,
	select {
		background-color: var(--sf-color-surface, #0f172a);
		color: var(--sf-color-text, #f1f5f9);
		border-color: var(--sf-color-border, #475569);
	}

	input:focus,
	textarea:focus,
	select:focus {
		border-color: var(--sf-color-primary, #a855f7);
	}

	.btn-secondary,
	button.secondary,
	.button.secondary {
		background-color: var(--sf-color-surface, #0f172a);
		color: var(--sf-color-text, #f1f5f9);
		border-color: var(--sf-color-border, #475569);
	}

	.border {
		border-color: var(--sf-color-border, #475569);
	}

	.bg-surface {
		background-color: var(--sf-color-surface, #0f172a);
	}
}

/* Print Styles */
@media print {
	body {
		background: white;
		color: black;
	}

	a {
		color: black;
	}

	button,
	[role="button"] {
		border: 1px solid black;
	}
}