/*
 * MMOZine V2 shared visual foundation.
 *
 * This file intentionally provides tokens and opt-in patterns only. Existing
 * Article, Game Hub, Profile, Auth and admin experiences migrate in later
 * sprints without inheriting unfinished page-specific changes.
 */

:root {
	--v2-color-canvas: #050b0f;
	--v2-color-surface: #081116;
	--v2-color-surface-raised: #0b151b;
	--v2-color-surface-soft: #101b21;
	--v2-color-text: #f1f0eb;
	--v2-color-text-soft: #c6c8c7;
	--v2-color-meta: #8f989b;
	--v2-color-red: #e0222b;
	--v2-color-red-deep: #b81721;
	--v2-color-border: #263138;
	--v2-color-border-soft: #19242a;
	--v2-content-width: 90rem;
	--v2-reading-width: 48rem;
	--v2-gutter: clamp(1rem, 3.4vw, 3rem);
	--v2-space-1: 0.375rem;
	--v2-space-2: 0.75rem;
	--v2-space-3: 1.125rem;
	--v2-space-4: 1.5rem;
	--v2-space-5: 2rem;
	--v2-space-6: 3rem;
	--v2-space-7: 4.5rem;
	--v2-radius-sm: 0.125rem;
	--v2-radius-md: 0.25rem;
	--v2-font-editorial: Georgia, "Times New Roman", serif;
	--v2-font-ui: Arial, Helvetica, sans-serif;
}

.v2-page {
	background: var(--v2-color-canvas);
	color: var(--v2-color-text);
}

.v2-surface {
	background: var(--v2-color-surface);
	border: 1px solid var(--v2-color-border-soft);
}

.v2-separator {
	border-color: var(--v2-color-border);
	border-style: solid;
	border-width: 1px 0 0;
}

.v2-section-heading {
	align-items: center;
	display: flex;
	gap: var(--v2-space-3);
	justify-content: space-between;
}

.v2-section-heading__title {
	color: var(--v2-color-text);
	font-family: var(--v2-font-editorial);
	font-size: clamp(1.65rem, 2.4vw, 2.25rem);
	font-weight: 500;
	line-height: 1;
	margin: 0;
}

.v2-meta,
.v2-story-label {
	font-family: var(--v2-font-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.025em;
}

.v2-story-label {
	color: var(--v2-color-red);
	font-weight: 800;
	text-transform: uppercase;
}

.v2-button {
	align-items: center;
	background: var(--v2-color-red);
	border: 1px solid var(--v2-color-red);
	border-radius: var(--v2-radius-sm);
	color: #fff;
	display: inline-flex;
	font-family: var(--v2-font-ui);
	font-size: 0.6875rem;
	font-weight: 800;
	gap: var(--v2-space-3);
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.75rem 1.125rem;
	text-transform: uppercase;
}

.v2-button:hover {
	background: var(--v2-color-red-deep);
	border-color: var(--v2-color-red-deep);
}

.v2-field {
	background: transparent;
	border: 1px solid var(--v2-color-border);
	border-radius: var(--v2-radius-sm);
	color: var(--v2-color-text);
	font-family: var(--v2-font-ui);
	min-height: 2.75rem;
	padding: 0.75rem 0.875rem;
}

.v2-tabs {
	align-items: center;
	border-bottom: 1px solid var(--v2-color-border);
	display: flex;
	gap: var(--v2-space-5);
	overflow-x: auto;
}

.v2-tab {
	border-bottom: 2px solid transparent;
	color: var(--v2-color-meta);
	font-size: 0.6875rem;
	font-weight: 800;
	padding: 0.875rem 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.v2-tab[aria-current="page"],
.v2-tab.is-active {
	border-bottom-color: var(--v2-color-red);
	color: var(--v2-color-text);
}

.v2-story-row {
	align-items: center;
	border-bottom: 1px solid var(--v2-color-border-soft);
	display: grid;
	gap: var(--v2-space-3);
	grid-template-columns: 6rem minmax(0, 1fr);
	min-width: 0;
	padding-block: var(--v2-space-2);
}

.v2-story-row__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.v2-story-row__media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.v2-score {
	align-items: center;
	border: 1px solid var(--v2-color-red);
	color: var(--v2-color-red);
	display: inline-flex;
	font-family: var(--v2-font-ui);
	font-weight: 800;
	justify-content: center;
}