/* ─── 1. Fonts & Tailwind ──────────────────────────────────────────────────── */
/* Tinos = Times substitute | Montserrat = Gotham substitute (De Gruyter Brill CI) */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
@import 'tailwindcss';

/* ─── 2. Raw palette — never used directly in components ──────────────────── */
@theme {
	/* Breakpoints */
	--breakpoint-xs: 375px;

	/* Brand palette constants */
	--palette-navy: #012851;
	--palette-mint: #a1dcd8;
	--palette-turquoise: #00c7b1;
	--palette-sand: #f0efe9;

	/* Typography */
	--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
	--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;

	--text-huge: 4rem;
}

/* ─── 3. Semantic tokens — Tailwind utilities backed by CSS variables ──────── */
/*
   @theme inline makes Tailwind generate utility classes (bg-surface, text-ink,
   border-line, etc.) whose values are CSS custom properties, not hardcoded hex.
   Changing --c-surface on :root is all it takes to retheme the whole UI.
*/
@theme inline {
	/* Surfaces */
	--color-canvas: var(--c-canvas);
	--color-surface: var(--c-surface);
	--color-overlay: var(--c-overlay);
	--color-muted: var(--c-muted);

	/* Reading sheet — article panel between canvas and the white cards it contains */
	--color-sheet: var(--c-sheet);

	/* Borders */
	--color-line: var(--c-line);
	--color-line-2: var(--c-line-2);

	/* Text */
	--color-ink: var(--c-ink);
	--color-ink-2: var(--c-ink-2);
	--color-ink-3: var(--c-ink-3);

	/* Accent (mint ↔ turquoise) */
	--color-accent: var(--c-accent);
	--color-accent-bg: var(--c-accent-bg);

	/* Primary interactive (navy ↔ mint) */
	--color-primary: var(--c-primary);
	--color-primary-fg: var(--c-primary-fg);

	/* PDF viewer */
	--color-pdf-bg: var(--c-pdf-bg);
	--color-pdf-ctrl: var(--c-pdf-ctrl);
	--color-pdf-text: var(--c-pdf-text);

	/* Header surface — independent from canvas/surface for per-mode control */
	--color-header: var(--c-header);

	/* Turquoise — transcription mode accent */
	--color-turquoise: var(--c-turquoise);
	--color-turquoise-fg: var(--c-turquoise-fg);

	/* Focus ring — keyboard focus indicator, mode-aware (navy in light, mint in dark) */
	--color-focus-ring: var(--c-focus-ring);

	/* Parchment — warm background for code/example blocks inside cards */
	--color-parchment: var(--c-parchment);

	/* Danger — destructive action color */
	--color-danger: var(--c-danger);
	--color-danger-fg: var(--c-danger-fg);

	/* Warning — amber, WCAG AA on white */
	--color-warning: #b45309;
	--color-warning-fg: #ffffff;

	/* Warning surface — amber banner (bg/border/text), mode-aware */
	--color-warning-bg: var(--c-warning-bg);
	--color-warning-border: var(--c-warning-border);
	--color-warning-text: var(--c-warning-text);

	/* Journey / Lesereise — orange semantic tokens (badge, interlude block, annotation) */
	--color-journey-tint: var(--c-journey-bg);
	--color-journey: var(--c-journey-text);
	--color-journey-border: var(--c-journey-border);

	/* Interlude row — neutral surface with left accent border; ZWISCHENTEXT label */
	--color-interlude-bg: var(--c-interlude-bg);
	--color-interlude-border: var(--c-interlude-border);
	--color-interlude-label: var(--c-interlude-label);

	/* Static brand tokens (not themed) */
	--color-brand-navy: var(--palette-navy);
	--color-brand-mint: var(--palette-mint);
}

/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
:root {
	/* 1px accent bar + 64px nav = 65px total sticky header height */
	--header-height: 65px;

	--c-canvas: #f0efe9;
	--c-surface: #ffffff;
	--c-overlay: #ffffff;
	--c-muted: #f5f4ef;
	--c-sheet: #fafaf7; /* between canvas and surface — spec .g-article value */

	--c-line: #e4e2d7;
	--c-line-2: #eeede8;

	--c-ink: #012851;
	--c-ink-2: #4b5563; /* gray-600 — 7.6:1 on white, 6.6:1 on canvas — WCAG AA ✓ */
	--c-ink-3: #6b7280; /* gray-500 — 4.8:1 on white, ~4.6:1 on canvas — WCAG AA ✓ */

	/* ⚠ accent — decorative use only (borders, icon tints, bg fills)
	   Light mode: #a1dcd8 on white = 1.52:1 — WCAG FAIL. Never use as text colour.
	   For interactive text labels use text-primary or text-ink instead. */
	--c-accent: #a1dcd8;
	--c-accent-bg: rgba(161, 220, 216, 0.15);

	--c-primary: #012851;
	--c-primary-fg: #ffffff;

	/* Header is brand-navy in light mode; same in dark mode for contrast compliance */
	--c-header: #012851;

	--c-turquoise: #00c7b1;
	--c-turquoise-fg: #ffffff;

	/* Focus ring: brand-navy in light mode — 14:1 on white, ~11:1 on sand */
	--c-focus-ring: #012851;

	--c-pdf-bg: #ebebeb;
	--c-pdf-ctrl: #d8d8d8;
	--c-pdf-text: #333333;

	/* Danger — destructive actions (5.1:1 on white — WCAG AA ✓) */
	--c-danger: #c0392b;
	--c-danger-fg: #ffffff;

	/* Parchment — warm near-white for example blocks (light mode: cream #FAF8F1) */
	--c-parchment: #faf8f1;

	/* Journey / Lesereise — orange semantic tokens
	   Text #7A3F0E on bg #FEF0E6 ≈ 7.4:1 — WCAG AAA ✓ (text-xs requires 4.5:1 normal-text) */
	--c-journey-bg: #fef0e6;
	--c-journey-text: #7a3f0e;
	--c-journey-border: #f0c99a;

	/* Interlude (Zwischentext) — neutral warm surface with left accent border */
	--c-interlude-bg: #f5f4f0;
	--c-interlude-border: #a1dcd8;
	--c-interlude-label: #4b5563;

	/* Warning surface — amber banner; text #92400E on #FFFBEB ≈ 7.7:1 — WCAG AAA ✓ */
	--c-warning-bg: #fffbeb;
	--c-warning-border: #fcd34d;
	--c-warning-text: #92400e;

	/* Tag color tokens — decorative dot colors on tag chips */
	--c-tag-sage: #5a8a6a;
	--c-tag-sienna: #a0522d;
	--c-tag-amber: #c17a00;
	--c-tag-slate: #607080;
	--c-tag-violet: #7a4f9a;
	--c-tag-rose: #c0446e;
	--c-tag-cobalt: #3060b0;
	--c-tag-moss: #4a7a3a;
	--c-tag-sand: #9a8040;
	--c-tag-coral: #c05540;

	/* PersonType badge — institution (navy-tinted blue) */
	--c-badge-institution-bg: #e8eff7;
	--c-badge-institution-text: #1a4971;
	--c-badge-institution-border: #c4d5e8;
	/* PersonType badge — group (muted purple) */
	--c-badge-group-bg: #f0e8f5;
	--c-badge-group-text: #5a2d6f;
	--c-badge-group-border: #d8c5e3;
	/* PersonType badge — unknown (amber warning) */
	--c-badge-unknown-bg: #fdf4e3;
	--c-badge-unknown-text: #7a5a0a;
	--c-badge-unknown-border: #f0ddb3;

	/* Timeline density bars (issue #385) — composited rgba(161,220,216,0.35)
	   over --c-surface (#ffffff) ≈ #DEF3F1 → ~1.13:1 vs surface. Decorative
	   idle fill in the same WCAG carve-out as --c-accent above; the meaningful
	   selected/preview state uses --palette-mint (1.52:1 vs white). Resample
	   with axe (tracked in #480) before tweaking the palette. */
	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
	--timeline-bar-outside: var(--c-line);

	/* Stammbaum gutter stripe (issue #689) — decorative full-row underlay
	   alternating with transparent. Mint-tinted on canvas to mark generation
	   rows without competing with node fills. 8% on light surface ≈ #ECF6F4
	   (~1.04:1 vs canvas — decorative carve-out). */
	--c-gutter-stripe: rgba(161, 220, 216, 0.08);
}

/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
/*
   Navy-tinted dark palette derived from brand-navy (#012851).
   KEEP THESE TWO BLOCKS IN SYNC — they cover the same design intent via
   different activation paths (system preference vs. manual toggle).
*/
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;

		--c-canvas: #010e1e;
		--c-surface: #011526;
		--c-overlay: #011e38;
		--c-muted: #011a30;
		--c-sheet: #011222; /* between canvas and surface */

		--c-line: #0d3358;
		--c-line-2: #092843;

		--c-ink: #f0efe9;
		--c-ink-2: #9ca3af; /* 7.5:1 on #011526 — WCAG AAA ✓ */
		--c-ink-3: #8b97a5; /* 7.1:1 on #011526 — WCAG AAA ✓ */

		--c-accent: #00c7b1;
		--c-accent-bg: rgba(0, 199, 177, 0.12);

		--c-primary: #a1dcd8;
		--c-primary-fg: #012851;

		/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
		--c-header: #012851;

		--c-turquoise: #00c7b1;
		--c-turquoise-fg: #012851;

		/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
		--c-focus-ring: #a1dcd8;

		--c-pdf-bg: #010e1e;
		--c-pdf-ctrl: #011526;
		--c-pdf-text: #f0efe9;

		--c-badge-institution-bg: rgba(30, 80, 140, 0.25);
		--c-badge-institution-text: #8bb8e0;
		--c-badge-institution-border: rgba(30, 80, 140, 0.4);
		--c-badge-group-bg: rgba(90, 45, 111, 0.25);
		--c-badge-group-text: #c9a0dc;
		--c-badge-group-border: rgba(90, 45, 111, 0.4);
		--c-badge-unknown-bg: rgba(122, 90, 10, 0.25);
		--c-badge-unknown-text: #e0c060;
		--c-badge-unknown-border: rgba(122, 90, 10, 0.4);

		/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
		--c-danger: #e55347;
		--c-danger-fg: #ffffff;

		/* Parchment — subtle surface shift for example blocks on dark navy */
		--c-parchment: #041828;

		/* Tag color tokens — lighter for visibility on dark backgrounds */
		--c-tag-sage: #7abf8a;
		--c-tag-sienna: #cc7050;
		--c-tag-amber: #f0aa30;
		--c-tag-slate: #8a9db0;
		--c-tag-violet: #b07ad0;
		--c-tag-rose: #f07090;
		--c-tag-cobalt: #6090e0;
		--c-tag-moss: #70b060;
		--c-tag-sand: #c0a060;
		--c-tag-coral: #f07060;

		/* Timeline density bars (issue #385) — 3.33:1 idle vs --c-surface (#011526),
		   clears WCAG 1.4.11 non-text contrast for large UI elements. */
		--timeline-bar-idle: #3a6e8c;
		--timeline-bar-outside: #1a2735;

		/* Stammbaum gutter stripe (issue #689) — 14% mint on dark canvas for
		   visibility parity with the 8% light-mode token. Decorative carve-out. */
		--c-gutter-stripe: rgba(161, 220, 216, 0.14);

		/* Journey / Lesereise — muted warm tint on dark navy; text #E8862A on
		   #3A2A1A ≈ 5.2:1 — WCAG AA ✓ (text-xs requires 4.5:1 normal-text) */
		--c-journey-bg: #3a2a1a;
		--c-journey-text: #e8862a;
		--c-journey-border: #7a4a1e;

		/* Interlude (Zwischentext) — KEEP IN SYNC with :root[data-theme='dark'] */
		--c-interlude-bg: #151c22;
		--c-interlude-border: #00c7b1;
		--c-interlude-label: #8b97a5;

		/* Warning surface — muted amber on dark; text #FBD38D on #2A2113 ≈ 9.5:1 — WCAG AAA ✓
		   KEEP IN SYNC with :root[data-theme='dark'] */
		--c-warning-bg: #2a2113;
		--c-warning-border: #6d5417;
		--c-warning-text: #fbd38d;
	}
}

/* Manual dark override — takes precedence over media query */
/* KEEP IN SYNC with the @media block above */
:root[data-theme='dark'] {
	color-scheme: dark;

	--c-canvas: #010e1e;
	--c-surface: #011526;
	--c-overlay: #011e38;
	--c-muted: #011a30;
	--c-sheet: #011222; /* between canvas and surface */

	--c-line: #0d3358;
	--c-line-2: #092843;

	--c-ink: #f0efe9;
	--c-ink-2: #9ca3af; /* 7.5:1 on #011526 — WCAG AAA ✓ */
	--c-ink-3: #8b97a5; /* 7.1:1 on #011526 — WCAG AAA ✓ */

	--c-accent: #00c7b1;
	--c-accent-bg: rgba(0, 199, 177, 0.12);

	--c-primary: #a1dcd8;
	--c-primary-fg: #012851;

	/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
	--c-header: #012851;

	--c-turquoise: #00c7b1;
	--c-turquoise-fg: #012851;

	/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
	--c-focus-ring: #a1dcd8;

	--c-pdf-bg: #010e1e;
	--c-pdf-ctrl: #011526;
	--c-pdf-text: #f0efe9;

	--c-badge-institution-bg: rgba(30, 80, 140, 0.25);
	--c-badge-institution-text: #8bb8e0;
	--c-badge-institution-border: rgba(30, 80, 140, 0.4);
	--c-badge-group-bg: rgba(90, 45, 111, 0.25);
	--c-badge-group-text: #c9a0dc;
	--c-badge-group-border: rgba(90, 45, 111, 0.4);
	--c-badge-unknown-bg: rgba(122, 90, 10, 0.25);
	--c-badge-unknown-text: #e0c060;
	--c-badge-unknown-border: rgba(122, 90, 10, 0.4);

	/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
	--c-danger: #e55347;
	--c-danger-fg: #ffffff;

	/* Parchment — subtle surface shift for example blocks on dark navy */
	--c-parchment: #041828;

	/* Tag color tokens — lighter for visibility on dark backgrounds */
	--c-tag-sage: #7abf8a;
	--c-tag-sienna: #cc7050;
	--c-tag-amber: #f0aa30;
	--c-tag-slate: #8a9db0;
	--c-tag-violet: #b07ad0;
	--c-tag-rose: #f07090;
	--c-tag-cobalt: #6090e0;
	--c-tag-moss: #70b060;
	--c-tag-sand: #c0a060;
	--c-tag-coral: #f07060;

	/* Timeline density bars (issue #385) — 3.33:1 idle vs --c-surface (#011526),
	   clears WCAG 1.4.11 non-text contrast for large UI elements. */
	--timeline-bar-idle: #3a6e8c;
	--timeline-bar-outside: #1a2735;

	/* Stammbaum gutter stripe (issue #689) — KEEP IN SYNC with the @media block. */
	--c-gutter-stripe: rgba(161, 220, 216, 0.14);

	/* Journey / Lesereise — KEEP IN SYNC with the @media block above */
	--c-journey-bg: #3a2a1a;
	--c-journey-text: #e8862a;
	--c-journey-border: #7a4a1e;

	/* Interlude (Zwischentext) — KEEP IN SYNC with the @media block above */
	--c-interlude-bg: #151c22;
	--c-interlude-border: #00c7b1;
	--c-interlude-label: #8b97a5;

	/* Warning surface — KEEP IN SYNC with the @media block above */
	--c-warning-bg: #2a2113;
	--c-warning-border: #6d5417;
	--c-warning-text: #fbd38d;
}

/* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */
/*
   In dark mode, invert all brand icons so they read as white on dark surfaces.
   Exclude .invert icons (already inverted for placement on dark backgrounds)
   so they don't get double-inverted back to black.
*/
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) img[src*='degruyter-icons']:not(.invert) {
		filter: invert(1);
	}
}

:root[data-theme='dark'] img[src*='degruyter-icons']:not(.invert) {
	filter: invert(1);
}

/* ─── 7. @mention chip ─────────────────────────────────────────────────────── */
/*
   Rendered by renderBody() via {@html ...} in CommentThread.svelte.
   Must live in global CSS — Svelte scoped styles don't reach injected HTML.
*/
.mention {
	display: inline;
	color: var(--c-ink);
	background-color: var(--c-accent-bg);
	border-radius: 3px;
	padding: 0 3px;
	font-weight: 600;
	font-style: normal;
	cursor: default;
	transition: background-color 0.15s ease;
}

.mention:hover {
	background-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
}

/* ─── 7b. Person mention link (transcription read mode) ────────────────────── */
/*
   Rendered by renderTranscriptionBody() via {@html ...} in TranscriptionReadView.
   Underline at rest is required for WCAG AA — colour alone fails 8% of men
   with red-green colour-blindness. Focus ring uses a box-shadow + border-radius
   so the rectangle doesn't touch the glyphs.

   Underline colour uses --c-ink at 50% so the link affordance is visible on
   any surface, including sand-tinted backgrounds where the previous mint
   accent at 60% (~1.6:1 on white — Leonie FINDING-06) was barely perceptible.
*/
.person-mention {
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--c-ink) 50%, transparent);
	cursor: pointer;
	transition: text-decoration-color 0.15s ease;
}

.person-mention:hover {
	text-decoration-color: var(--c-accent);
	text-decoration-thickness: 2px;
}

.person-mention:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--c-ink);
	border-radius: 2px;
}

/* ─── 8. Base styles ───────────────────────────────────────────────────────── */
@layer base {
	html {
		overscroll-behavior: none;
	}

	body {
		background-color: var(--c-canvas);
		color: var(--c-ink);
		font-family: var(--font-serif);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-sans);
		font-weight: 600;
	}

	/* Form controls — always use surface bg and ink text so they theme correctly */
	input,
	textarea,
	select {
		background-color: var(--c-surface);
		color: var(--c-ink);
	}

	a:hover {
		text-decoration-color: var(--c-accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}

	/* Tailwind preflight resets cursor on *, overriding the browser default for buttons */
	button {
		cursor: pointer;
	}

	/* Fallback focus ring for any interactive element not styled with ring-focus-ring */
	:focus-visible {
		outline: 2px solid var(--c-focus-ring);
		outline-offset: 2px;
	}
}

/* Ensure focus rings are visible in Windows High Contrast / forced-colors mode */
@media (forced-colors: active) {
	:focus-visible {
		outline: 3px solid ButtonText;
	}
}

/* ─── Tiptap editor ─────────────────────────────────────────────────────────── */

/* Placeholder: shown on the inner contenteditable when the editor is empty
   and unfocused. Uses the data-placeholder attribute set via editorProps. */
.tiptap-editor-inner[data-placeholder]:not(:focus)::before {
	content: attr(data-placeholder);
	color: var(--c-ink-3);
	pointer-events: none;
	float: left;
	height: 0;
}

/* Remove default ProseMirror focus ring — the outer wrapper has its own. */
.tiptap-editor-inner:focus {
	outline: none;
}

@keyframes slide {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(350%);
	}
}

@media print {
	:global(.app-nav) {
		display: none;
	}

	@page {
		margin: 1.5cm;
	}
}

.chronik-fade-in {
	animation: chronik-fade-in 160ms ease-out;
}

@keyframes chronik-fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.chronik-fade-in {
		animation: none;
	}
}
