/**
 * AlexaHire Main Stylesheet
 *
 * Core design tokens, CSS variables, typography, and foundational layout.
 *
 * @package AlexaHire
 */

:root {
	/* Brand Colors */
	--ah-primary: #1a56db;
	--ah-primary-dark: #1e429f;
	--ah-secondary: #0ea5e9;
	--ah-accent: #3b82f6;
	--ah-dark: #0a101f;
	--ah-dark-surface: #0f172a;
	--ah-dark-card: #1e293b;

	/* Functional Colors */
	--ah-text: #0f172a;
	--ah-text-light: #334155;
	--ah-muted: #64748b;
	--ah-border: #e2e8f0;
	--ah-border-light: #f1f5f9;
	--ah-bg: #ffffff;
	--ah-surface: #f8fafc;
	--ah-surface-blue: #f0f7ff;
	--ah-surface-light: #f9fbfe;

	/* Feedback Colors */
	--ah-success: #16a34a;
	--ah-success-bg: #dcfce7;
	--ah-warning: #d97706;
	--ah-warning-bg: #fef3c7;
	--ah-danger: #dc2626;
	--ah-danger-bg: #fee2e2;

	/* Border Radii */
	--ah-radius-sm: 6px;
	--ah-radius: 10px;
	--ah-radius-lg: 16px;
	--ah-radius-xl: 24px;
	--ah-radius-full: 9999px;

	/* Dimensions */
	--ah-container: 1240px;
	--ah-container-sm: 960px;

	/* Shadows */
	--ah-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--ah-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--ah-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
	--ah-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);

	/* Typography */
	--ah-font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ah-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Base Reset */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--ah-font-main);
	color: var(--ah-text);
	background-color: var(--ah-bg);
	line-height: 1.6;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ah-font-heading);
	color: var(--ah-text);
	font-weight: 700;
	line-height: 1.25;
}

h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
	margin-bottom: 1rem;
	color: var(--ah-text-light);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--ah-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover, a:focus {
	color: var(--ah-primary-dark);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Layout Utilities */
.ah-container {
	width: 100%;
	max-width: var(--ah-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.ah-container--sm {
	max-width: var(--ah-container-sm);
}

.ah-section {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.ah-section--surface {
	background-color: var(--ah-surface);
}

.ah-section--soft-blue {
	background-color: var(--ah-surface-blue);
}

/* Section Header */
.ah-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	flex-wrap: wrap;
	gap: 1rem;
}

.ah-section-title-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ah-section-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ah-text);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ah-section-view-all {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ah-primary);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.ah-section-view-all:hover {
	text-decoration: underline;
}

/* Screen reader utility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}