/* ==========================================================================
   base.css — reset, custom properties, typography base.
   Obsydian background + ember torchlight accent. No shadows, no gradients.
   ========================================================================== */

:root {
	/* Colors */
	--c-bg:          #0B0B0D;
	--c-surface:     #141418;
	--c-surface2:    #1D1D22;
	--c-border:      #2B2B32;
	--c-text:        #E8E4D8;
	--c-text-dim:    #8F8A7E;
	--c-accent:      #D4632A;
	--c-accent-hover:#E5763B;
	--c-accent-sec:  #6B7F5C;
	--c-special:     #1F1812;
	--c-white:       #F5F0E3;
	--c-error:       #CF4D4A;
	--c-success:     #7D9968;

	/* Fonts */
	--f-heading: 'Spectral', 'Libre Caslon Text', Georgia, serif;
	--f-body:    'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--f-mono:    'JetBrains Mono', 'Consolas', 'Courier New', monospace;

	/* Spacing (8px grid) */
	--s-4:   0.25rem;
	--s-8:   0.5rem;
	--s-12:  0.75rem;
	--s-16:  1rem;
	--s-24:  1.5rem;
	--s-32:  2rem;
	--s-40:  2.5rem;
	--s-48:  3rem;
	--s-64:  4rem;
	--s-80:  5rem;
	--s-96:  6rem;
	--s-120: 7.5rem;

	/* Transitions */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur:  250ms;

	/* Layout */
	--max-w:    1080px;
	--header-h: 60px;

	/* Border radius — near-square, editorial-flat */
	--r-sm: 2px;
	--r-md: 3px;
	--r-lg: 6px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--c-bg);
}

body {
	margin: 0;
	padding: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-heading);
	font-weight: 500;
	color: var(--c-white);
	margin: 0 0 var(--s-16);
	line-height: 1.2;
	letter-spacing: -0.005em;
}

h1 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.15;
	font-weight: 500;
}

h2 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.2;
}

h3 {
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	line-height: 1.3;
}

h4 {
	font-size: 1.125rem;
}

p {
	margin: 0 0 var(--s-16);
}

p + h2,
p + h3,
ul + h2,
ul + h3,
ol + h2,
ol + h3 {
	margin-top: var(--s-48);
}

a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--c-accent-hover);
	text-decoration-thickness: 2px;
}

ul, ol {
	margin: 0 0 var(--s-16);
	padding-left: var(--s-24);
}

li {
	margin-bottom: var(--s-8);
}

strong, b {
	font-weight: 700;
	color: var(--c-white);
}

em, i {
	font-style: italic;
}

code, kbd, samp, pre {
	font-family: var(--f-mono);
	font-size: 0.875em;
	color: var(--c-text);
	background: var(--c-surface);
	padding: 0.1em 0.3em;
	border-radius: var(--r-sm);
}

pre {
	padding: var(--s-16);
	overflow-x: auto;
	line-height: 1.5;
}

pre code {
	padding: 0;
	background: transparent;
}

blockquote {
	margin: var(--s-32) 0;
	padding-left: var(--s-24);
	border-left: 2px solid var(--c-accent);
	font-family: var(--f-heading);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--c-text);
}

hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin: var(--s-48) 0;
}

/* --- Selection --- */
::selection {
	background: var(--c-accent);
	color: var(--c-bg);
}

/* --- Focus --- */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* --- Skip link / screen-reader only --- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-accent);
	color: var(--c-bg);
	padding: var(--s-12) var(--s-16);
	z-index: 9999;
	text-decoration: none;
	font-family: var(--f-body);
	font-weight: 700;
}
.skip-link:focus {
	left: var(--s-16);
	top: var(--s-16);
}

/* --- WCAG: ensure --c-text-dim on --c-bg stays readable for ≥14px text --- */
.dim {
	color: var(--c-text-dim);
}