/**
 * CV theme: accessibility & readability
 * WCAG 2.1 AA contrast (4.5:1 normal text, 3:1 large text).
 * Light mode (default) and dark mode via prefers-color-scheme.
 */

/* Light mode (default) */
:root {
	--cv-bg-page: #e5e6e8;
	--cv-bg-container: #ffffff;
	--cv-bg-card: #f2f3f4;
	--cv-bg-highlight: #e3f2fd;
	--cv-bg-warning: #fff8e1;
	--cv-text: #1a1a1a;
	--cv-text-secondary: #505050;
	--cv-heading: #1a1a1a;
	--cv-heading-accent: #0d47a1;
	--cv-border: #b0b4b8;
	--cv-border-light: #d8dadc;
	--cv-link: #1565c0;
	--cv-link-hover: #0d47a1;
	--cv-btn-bg: #1565c0;
	--cv-btn-bg-hover: #0d47a1;
	--cv-btn-text: #ffffff;
	--cv-shadow: rgba(0, 0, 0, 0.08);
}

/* Dark mode (system preference) */
@media (prefers-color-scheme: dark) {
	:root {
		--cv-bg-page: #121212;
		--cv-bg-container: #1e1e1e;
		--cv-bg-card: #2d2d2d;
		--cv-bg-highlight: #1e3a5f;
		--cv-bg-warning: #5d4e37;
		--cv-text: #e8e8e8;
		--cv-text-secondary: #b8b8b8;
		--cv-heading: #e8e8e8;
		--cv-heading-accent: #90caf9;
		--cv-border: #505050;
		--cv-border-light: #3a3a3a;
		--cv-link: #90caf9;
		--cv-link-hover: #bbdefb;
		--cv-btn-bg: #1976d2;
		--cv-btn-bg-hover: #42a5f5;
		--cv-btn-text: #ffffff;
		--cv-shadow: rgba(0, 0, 0, 0.3);
	}
}

/* Align CV tokens with theme-toggle.js (manual light / dark / auto) */
html[data-theme="light"] {
	--cv-bg-page: #e5e6e8;
	--cv-bg-container: #ffffff;
	--cv-bg-card: #f2f3f4;
	--cv-bg-highlight: #e3f2fd;
	--cv-bg-warning: #fff8e1;
	--cv-text: #1a1a1a;
	--cv-text-secondary: #505050;
	--cv-heading: #1a1a1a;
	--cv-heading-accent: #0d47a1;
	--cv-border: #b0b4b8;
	--cv-border-light: #d8dadc;
	--cv-link: #1565c0;
	--cv-link-hover: #0d47a1;
	--cv-btn-bg: #1565c0;
	--cv-btn-bg-hover: #0d47a1;
	--cv-btn-text: #ffffff;
	--cv-shadow: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
	--cv-bg-page: #121212;
	--cv-bg-container: #1e1e1e;
	--cv-bg-card: #2d2d2d;
	--cv-bg-highlight: #1e3a5f;
	--cv-bg-warning: #5d4e37;
	--cv-text: #e8e8e8;
	--cv-text-secondary: #b8b8b8;
	--cv-heading: #e8e8e8;
	--cv-heading-accent: #90caf9;
	--cv-border: #505050;
	--cv-border-light: #3a3a3a;
	--cv-link: #90caf9;
	--cv-link-hover: #bbdefb;
	--cv-btn-bg: #1976d2;
	--cv-btn-bg-hover: #42a5f5;
	--cv-btn-text: #ffffff;
	--cv-shadow: rgba(0, 0, 0, 0.3);
}

/* Base readability (apply on body or .cv-container parent) */
.page-cv {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
	line-height: 1.6;
	color: var(--cv-text);
	background-color: var(--cv-bg-page);
}

/* Focus visible for keyboard users (accessibility) */
.page-cv a:focus-visible,
.page-cv button:focus-visible {
	outline: 2px solid var(--cv-heading-accent);
	outline-offset: 2px;
}

.page-cv .back-link:focus-visible {
	outline: 2px solid var(--cv-btn-text);
	outline-offset: 2px;
}

/* Skip link / reduce motion (optional) */
@media (prefers-reduced-motion: reduce) {
	.page-cv * {
		animation-duration: 0.01ms;
		transition-duration: 0.01ms;
	}
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.6;
	color: var(--cv-text);
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: var(--cv-bg-page);
}
body.page-cv a {
	color: var(--cv-link);
}
body.page-cv a:hover {
	color: var(--cv-link-hover);
}
.cv-container {
	background-color: var(--cv-bg-container);
	padding: 30px;
	box-shadow: 0 0 10px var(--cv-shadow);
}
h1 {
	color: var(--cv-heading);
	border-bottom: 3px solid var(--cv-heading-accent);
	padding-bottom: 10px;
	margin-bottom: 20px;
}
h2 {
	color: var(--cv-heading-accent);
	margin-top: 25px;
	margin-bottom: 15px;
	font-size: 1.3em;
}
.header {
	text-align: center;
	margin-bottom: 30px;
}
.title {
	font-size: 1.2em;
	color: var(--cv-text-secondary);
	margin-top: 5px;
}
.contact {
	margin-top: 15px;
	font-size: 0.95em;
}
.section {
	margin-bottom: 25px;
}
h3 {
	color: var(--cv-heading);
	font-size: 1.05em;
	margin-top: 12px;
	margin-bottom: 8px;
}
.job-entry {
	margin-bottom: 20px;
	padding-left: 12px;
	border-left: 2px solid var(--cv-border-light);
}
.job-header {
	margin-bottom: 6px;
}
.company {
	font-weight: bold;
	font-size: 1em;
}
.period {
	color: var(--cv-text-secondary);
	font-style: italic;
	font-size: 0.95em;
}
ul {
	padding-left: 20px;
}
li {
	margin-bottom: 5px;
}
.back-link {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 15px;
	background-color: var(--cv-btn-bg);
	color: var(--cv-btn-text);
	text-decoration: none;
	border-radius: 5px;
}
.back-link:hover {
	background-color: var(--cv-btn-bg-hover);
}