/* ============================================================
 * Litigation Docs — base.css
 * Design tokens, reset, typography, @font-face, layout primitives.
 * ============================================================ */

/* --- Self-hosted fonts ------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/Fraunces-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --- Design tokens ----------------------------------------------------- */
:root {
	/* Color — crimson sampled directly from the client wordmark SVG */
	--ld-crimson:        #AC1F2B;
	--ld-crimson-deep:   #7D1620;
	--ld-crimson-ink:    #030404;  /* the DOCS-glyph black in the wordmark */
	--ld-ink:            #0E0E10;
	--ld-parchment:      #F7F3EC;
	--ld-parchment-alt:  #EFE9DC;
	--ld-slate:          #2A2E33;
	--ld-muted:          #6B6F76;
	--ld-rule:           rgba(14, 14, 16, 0.08);
	--ld-rule-strong:    rgba(14, 14, 16, 0.18);
	--ld-gold:           #B8944A;
	--ld-white:          #FFFFFF;

	/* Typography */
	--ld-serif:          'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--ld-sans:           'Inter', 'Helvetica Neue', Arial, sans-serif;
	--ld-mono:           'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

	--ld-fs-xs:    0.8125rem;   /* 13px */
	--ld-fs-sm:    0.9375rem;   /* 15px */
	--ld-fs-base:  1.0625rem;   /* 17px */
	--ld-fs-md:    1.25rem;     /* 20px */
	--ld-fs-lg:    1.5625rem;   /* 25px */
	--ld-fs-xl:    1.953rem;    /* ~31px */
	--ld-fs-2xl:   2.441rem;    /* ~39px */
	--ld-fs-3xl:   3.052rem;    /* ~49px */
	--ld-fs-4xl:   clamp(3rem, 5vw + 1rem, 4.5rem);

	/* Spacing — 4px base */
	--ld-s-1:  0.25rem;
	--ld-s-2:  0.5rem;
	--ld-s-3:  1rem;
	--ld-s-4:  1.5rem;
	--ld-s-5:  2.5rem;
	--ld-s-6:  4rem;
	--ld-s-7:  6rem;
	--ld-s-8:  9rem;

	/* Layout */
	--ld-content: 68ch;
	--ld-wide:    1280px;
	--ld-hero:    1440px;

	/* Motion */
	--ld-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
	--ld-ease-bold: cubic-bezier(0.7, 0, 0.3, 1);
	--ld-d-micro:  180ms;
	--ld-d-std:    320ms;
	--ld-d-reveal: 560ms;

	/* Radii */
	--ld-radius-sm: 2px;
	--ld-radius:    4px;
	--ld-radius-lg: 10px;

	/* Shadows — used sparingly */
	--ld-shadow-soft: 0 1px 2px rgba(14, 14, 16, 0.04), 0 6px 16px rgba(14, 14, 16, 0.06);
	--ld-shadow-lift: 0 2px 4px rgba(14, 14, 16, 0.06), 0 16px 40px rgba(14, 14, 16, 0.12);
}

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

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

body {
	margin: 0;
	font-family: var(--ld-sans);
	font-size: var(--ld-fs-base);
	line-height: 1.6;
	color: var(--ld-slate);
	background: var(--ld-parchment);
	font-feature-settings: 'ss01', 'cv11'; /* Inter stylistic sets */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* --- Typography -------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ld-serif);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ld-ink);
	margin: 0 0 var(--ld-s-3);
	font-feature-settings: 'ss01';
}

h1 { font-size: var(--ld-fs-3xl); line-height: 1.05; }
h2 { font-size: var(--ld-fs-2xl); }
h3 { font-size: var(--ld-fs-xl);  }
h4 { font-size: var(--ld-fs-lg);  }
h5 { font-size: var(--ld-fs-md);  }
h6 { font-size: var(--ld-fs-base); }

p {
	margin: 0 0 var(--ld-s-3);
	max-width: var(--ld-content);
}

a {
	color: var(--ld-crimson);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--ld-d-micro) var(--ld-ease);
}
a:hover,
a:focus-visible {
	color: var(--ld-crimson-deep);
	text-decoration: underline;
}

strong, b { font-weight: 600; }

code, pre, kbd, samp {
	font-family: var(--ld-mono);
	font-size: 0.9em;
}
code { color: var(--ld-ink); background: var(--ld-parchment-alt); padding: 0.1em 0.35em; border-radius: var(--ld-radius-sm); }

blockquote {
	border-left: 2px solid var(--ld-crimson);
	padding-left: var(--ld-s-3);
	margin: var(--ld-s-4) 0;
	font-family: var(--ld-serif);
	font-style: italic;
	font-size: var(--ld-fs-lg);
	color: var(--ld-ink);
}

hr { border: none; height: 1px; background: var(--ld-rule); margin: var(--ld-s-5) 0; }

ul, ol { padding-left: 1.25em; margin: 0 0 var(--ld-s-3); }
li + li { margin-top: var(--ld-s-1); }

/* --- Focus ------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--ld-crimson);
	outline-offset: 2px;
	border-radius: var(--ld-radius);
}

/* --- Skip link --------------------------------------------------------- */
.ld-skip-link {
	position: absolute; top: -40px; left: 0;
	background: var(--ld-ink); color: var(--ld-parchment);
	padding: var(--ld-s-2) var(--ld-s-3);
	z-index: 10000;
	transition: top var(--ld-d-micro) var(--ld-ease);
}
.ld-skip-link:focus { top: 0; color: var(--ld-parchment); }

/* --- Layout primitives ------------------------------------------------- */
.ld-container {
	max-width: var(--ld-wide);
	margin-inline: auto;
	padding-inline: var(--ld-s-4);
}
@media (min-width: 768px) {
	.ld-container { padding-inline: var(--ld-s-5); }
}

.ld-main { min-height: 50vh; }

/* --- Atmosphere (paper grain + radial gradients + seal watermark) ----- */
.ld-atmosphere {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.ld-atmosphere__noise,
.ld-atmosphere__radial,
.ld-atmosphere__rules,
.ld-atmosphere__seal {
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: -1;
}
.ld-atmosphere__noise {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.055 0 0 0 0 0.055 0 0 0 0 0.063 0 0 0 0.6 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
	background-size: 180px;
	opacity: 0.03;
	mix-blend-mode: multiply;
}
.ld-atmosphere__radial {
	background:
		radial-gradient(60% 40% at 20% 20%, rgba(139, 31, 45, 0.05), transparent 70%),
		radial-gradient(50% 40% at 85% 90%, rgba(14, 14, 16, 0.04), transparent 70%);
}
.ld-atmosphere__rules {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 31px,
		var(--ld-rule) 31px,
		var(--ld-rule) 32px
	);
	opacity: 0.5;
}
.ld-atmosphere__seal {
	background-image: url("../img/favicon-512.png");
	background-size: min(40vw, 520px);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	opacity: 0.035;
}

/* --- Reveal animations ------------------------------------------------- */
/* DEFENSIVE PATTERN: elements are visible by default. Only when main.js
   has marked the document as JS-ready are they hidden pending reveal.
   This ensures no-JS visitors, crawlers, and print exports always see
   the content. */
[data-reveal] {
	opacity: 1;
	transform: none;
	transition: opacity var(--ld-d-reveal) var(--ld-ease),
	            transform var(--ld-d-reveal) var(--ld-ease);
}
html.ld-js-ready [data-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(12px);
}
html.ld-js-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
}

/* --- 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;
}
.screen-reader-text:focus {
	clip: auto !important;
	display: block;
	left: 5px; top: 5px;
	padding: 15px 23px 14px;
	background: var(--ld-ink); color: var(--ld-parchment);
	z-index: 100000;
}