/**
 * Xervia global visual foundation.
 *
 * Source of truth: docs/VISUAL-SYSTEM.md.
 * Component-specific rules belong in their contextual stylesheets.
 */

:root {
	/* Neutral scale. */
	--xv-neutral-000: #ffffff;
	--xv-neutral-050: #f4f6f8;
	--xv-neutral-200: #ccd5df;
	--xv-neutral-600: #5f6e80;
	--xv-neutral-800: #273548;
	--xv-neutral-950: #101722;

	/* Brand red scale. */
	--xv-red-050: #f8e7ea;
	--xv-red-400: #ed6475;
	--xv-red-600: #b4233a;
	--xv-red-800: #7b1628;

	/* Structural blue scale. */
	--xv-blue-050: #e5eef8;
	--xv-blue-600: #175a9c;
	--xv-blue-800: #102a43;

	/* Dark surfaces and accessibility. */
	--xv-night: #091522;
	--xv-on-dark: #f7f9fc;
	--xv-on-dark-muted: #bbc7d4;
	--xv-focus: #2e77c5;

	/* Semantic color roles. */
	--xv-color-page: var(--xv-neutral-050);
	--xv-color-surface: var(--xv-neutral-000);
	--xv-color-text: var(--xv-neutral-800);
	--xv-color-heading: var(--xv-neutral-950);
	--xv-color-muted: var(--xv-neutral-600);
	--xv-color-border: var(--xv-neutral-200);
	--xv-color-control-border: var(--xv-neutral-600);
	--xv-color-brand: var(--xv-red-600);
	--xv-color-icon-on-dark: var(--xv-red-400);
	--xv-color-brand-strong: var(--xv-red-800);
	--xv-color-link: var(--xv-blue-600);
	--xv-color-structure: var(--xv-blue-800);
	--xv-color-structure-text: var(--xv-blue-800);
	--xv-on-brand: var(--xv-on-dark);
	--xv-overlay-bg: var(--xv-night);
	--xv-selection-text: var(--xv-color-heading);
	--xv-color-special: var(--xv-blue-800);
	--xv-color-footer: var(--xv-night);

	/* IBM Plex Sans is self-hosted; this system stack remains the fallback. */
	--xv-font-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--xv-font-family-base: "IBM Plex Sans", var(--xv-font-family-fallback);
	--xv-font-weight-regular: 400;
	--xv-font-weight-semibold: 600;
	--xv-font-weight-bold: 700;
	--xv-line-height-body: 1.65;
	--xv-line-height-heading: 1.15;

	/* Shared accessible focus treatment. */
	--xv-focus-width: 0.1875rem;
	--xv-focus-offset: 0.1875rem;

	color-scheme: light;
}

html {
	background-color: var(--xv-color-page);
}

body {
	background-color: var(--xv-color-page);
	color: var(--xv-color-text);
	font-family: var(--xv-font-family-base);
	font-weight: var(--xv-font-weight-regular);
	line-height: var(--xv-line-height-body);
}

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--xv-color-heading);
	font-family: var(--xv-font-family-base);
	font-weight: var(--xv-font-weight-bold);
	line-height: var(--xv-line-height-heading);
	text-wrap: balance;
}

:where(a) {
	color: var(--xv-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

:where(a:hover, a:active) {
	color: var(--xv-color-brand-strong);
}

:where(button, input, select, textarea) {
	font: inherit;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: var(--xv-focus-width) solid var(--xv-focus);
	outline-offset: var(--xv-focus-offset);
}

::selection {
	background-color: var(--xv-red-050);
	color: var(--xv-selection-text);
}

/* Native pages and comment forms share the editable surface palette. */
body:not(.single-post) .inside-article {
	background: var(--xv-color-surface);
}

.comments-area input:not([type="submit"]),
.comments-area textarea {
	background: var(--xv-color-surface);
	color: var(--xv-color-text);
	border-color: var(--xv-color-control-border);
}

#page input::placeholder,
#page textarea::placeholder {
	color: var(--xv-color-muted);
	opacity: 1;
}

#page input[type="submit"] {
	background: var(--xv-color-brand);
	color: var(--xv-on-brand);
}

:where(img, picture, video) {
	max-width: 100%;
	height: auto;
}