/**
 * Design Tokens — Food Safety Courses
 *
 * Exact palette from the brief: deep navy + warm amber + neutral inks.
 * Fraunces (display) + Inter (body) + JetBrains Mono (accents).
 */

:root {
	/* ─── Brand ─── */
	--fsc-brand-900: #0B1F3A;
	--fsc-brand-700: #15315A;
	--fsc-brand-500: #2A5AA0;
	--fsc-brand-100: #E7EEF8;

	/* ─── Accent ─── */
	--fsc-accent-500: #E8A33D;
	--fsc-accent-600: #C9871E;
	--fsc-accent-100: #FBEFD6;
	--fsc-accent-bg:  #F7ECD7;

	/* ─── Neutrals ─── */
	--fsc-ink-900: #0F1419;
	--fsc-ink-700: #384049;
	--fsc-ink-500: #6B7480;
	--fsc-ink-200: #E5E7EB;
	--fsc-ink-50:  #F7F8FA;
	--fsc-surface: #FFFFFF;

	/* ─── Semantic ─── */
	--fsc-success: #1F8A5C;
	--fsc-warning: #C9871E;
	--fsc-danger:  #B91C1C;

	/* ─── Typography ─── */
	--fsc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--fsc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--fsc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* ─── Layout ─── */
	--fsc-container-max: 1280px;
	--fsc-container-gutter: 48px;
	--fsc-radius-card: 12px;
	--fsc-radius-btn:  8px;
	--fsc-radius-pill: 999px;

	/* ─── Shadows ─── */
	--fsc-shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04);
	--fsc-shadow-md: 0 1px 2px rgba(15, 20, 25, 0.04), 0 4px 12px rgba(15, 20, 25, 0.04);
	--fsc-shadow-lg: 0 12px 40px rgba(15, 20, 25, 0.12);

	/* ─── Rhythm ─── */
	--fsc-section-pad: 96px;
	--fsc-section-pad-sm: 64px;

	/* ─── Transitions ─── */
	--fsc-t-fast: .15s ease;
	--fsc-t: .18s ease;
}

@media (max-width: 768px) {
	:root {
		--fsc-container-gutter: 24px;
		--fsc-section-pad: 64px;
		--fsc-section-pad-sm: 48px;
	}
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--fsc-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--fsc-ink-900);
	background: var(--fsc-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: var(--fsc-brand-500); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fsc-font-display);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--fsc-brand-900);
	line-height: 1.15;
	margin: 0;
}

/* Accessible focus ring */
:focus-visible {
	outline: 2px solid var(--fsc-brand-500);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Skip link */
.fsc-skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	padding: 10px 16px;
	background: var(--fsc-brand-900);
	color: #fff;
	z-index: 10000;
	border-radius: 6px;
	font-size: 14px;
}
.fsc-skip-link:focus { left: 8px; }

/* Screen reader only */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}