/*
 * ForsakenRO shared browser chrome — CANONICAL SOURCE.
 *
 * Published to https://assets.forsaken-ro.net/chrome/v1/forsakenro-chrome.css
 * and referenced DIRECTLY by all four properties (main site, control panel,
 * Tokenshop, wiki). No vendoring, no sync step. See ../../AGENTS.md → "chrome/".
 *
 * PUBLISHED PATHS ARE IMMUTABLE. Never edit an object already live under
 * chrome/v1/ — a bad push breaks four properties at once with no staging. Ship
 * breaking changes as chrome/v2/ and migrate consumers deliberately.
 *
 * Scope: design tokens + the dark topbar strip, the white main header, and the
 * dark footer columns. Per-property MARKUP stays in each property (four
 * templating languages, not interchangeable) and so does anything
 * framework-specific — WooCommerce/Zensical/Flux overrides do NOT belong here.
 *
 * Consumers whose framework needs it may remap their own variables onto these
 * tokens locally (the wiki maps Zensical's --md-* onto them, for example).
 */

/* ---- Design tokens (shared across all four properties) ----
   Guarded by wiki-development tools/check_theme_tokens.py; the dark block
   mirrors the control panel's canonical ramp (cp .../css/flux.css). */
:root {
	color-scheme: light;
	--blue: #3d8fd4;
	--blue-dark: #2a6fa8;
	--blue-light: #5aaae8;
	--ink: #333333;
	--muted: #666666;
	--surface: #f4f4f4;
	--white: #ffffff;
	--border: #e0e0e0;
	--header-top: #222222;
	--footer-bg: #1a1a1a;
	--purple: #8866bb;
	--online: #4caf50;
	--card: #ffffff;
	--card-alt: #f9f9f9;
	--shadow: rgba(0, 0, 0, 0.12);

	/* Dark topbar/footer bands: constant in both modes (they always sit on
	   --header-top / --footer-bg), so these do NOT flip with the theme. */
	--strip-fg: #aaaaaa;
	--strip-fg-strong: #ffffff;
	--strip-link: #cccccc;
	--strip-heading: #cfd3d8;
	--strip-muted: #9aa0a6;
	--strip-rule: #333333;
}
html[data-theme="dark"] {
	color-scheme: dark;
	--blue: #5aaae8;
	--blue-dark: #3d8fd4;
	--blue-light: #73baf0;
	--ink: #e7e9ef;
	--muted: #9298a7;
	--surface: #080b14;
	--white: #111520;
	--border: #252b3d;
	--header-top: #05070d;
	--footer-bg: #05070d;
	--purple: #b58bea;
	--online: #5bd47a;
	--card: #111520;
	--card-alt: #1b2233;
	--shadow: rgba(0, 0, 0, 0.6);
}

/* =====================================================================
   Shared header chrome: dark topbar strip + white main header
   ===================================================================== */
.fro-chrome * { box-sizing: border-box; }

.fro-topbar {
	background: var(--header-top);
	font-size: 0.78rem;
	color: var(--strip-fg);
}
.fro-topbar-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 32px;
}
.fro-topbar-left,
.fro-topbar-right {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 1rem;
	align-items: center;
}
.fro-topbar-left a {
	color: var(--strip-link);
	text-decoration: none;
	font-size: 0.78rem;
}
.fro-topbar-left a:hover { color: var(--strip-fg-strong); }
/* You-are-here: highlight this property's own topbar entry. */
.fro-topbar-left a.fro-topbar-active { color: var(--strip-fg-strong); font-weight: 700; }
.fro-topbar-right li {
	color: var(--strip-fg);
	font-size: 0.78rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.fro-topbar-right li.fro-status-item { cursor: help; }
.fro-status-dot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--muted);
}
.fro-status-dot.online { background: var(--online); }

.fro-main-header {
	background: var(--card);
	border-bottom: 1px solid var(--border);
}
.fro-main-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.fro-logo {
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -0.03em;
	white-space: nowrap;
}
.fro-logo span { color: var(--blue); }
/* Per-property wordmark ("Tokenshop") — shared convention with site/CP/wiki. */
.fro-logo .fro-logo-sub {
	margin-left: 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}
.fro-logo:hover { text-decoration: none; }

.fro-nav {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	flex-wrap: wrap;
}
.fro-nav-link {
	padding: 0.3rem 0.7rem;
	border-radius: 4px;
	font-size: 0.9rem;
	color: var(--ink);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.fro-nav-link:hover { background: var(--surface); color: var(--blue); }
.fro-btn-join {
	margin-left: 0.5rem;
	padding: 0.35rem 1rem;
	background: var(--blue);
	color: #fff;
	border-radius: 4px;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
}
.fro-btn-join:hover { background: var(--blue-dark); color: #fff; }

.fro-theme-toggle {
	display: flex;
	width: 34px; height: 34px;
	margin-left: 0.35rem;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}
.fro-theme-icon { width: 18px; height: 18px; fill: currentColor; }
.fro-theme-toggle .sun-icon { display: none; }
html[data-theme="dark"] .fro-theme-toggle .moon-icon { display: none; }
html[data-theme="dark"] .fro-theme-toggle .sun-icon { display: block; }

/* Shop utility row: product search + cart, themed */

/* Mobile menu toggle */
.fro-menu-toggle {
	display: none;
	width: 40px; height: 36px;
	padding: 0.4rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--card);
	cursor: pointer;
	flex-direction: column;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
}
.fro-menu-toggle span {
	display: block; width: 18px; height: 2px;
	background: var(--ink); border-radius: 2px;
}

@media (max-width: 680px) {
	.fro-topbar-right { display: none; }
	.fro-menu-toggle { display: flex; }
	.fro-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
	}
	.fro-nav.is-open { display: flex; }
}

/* =====================================================================
   Shared footer chrome: dark link columns
   ===================================================================== */
.fro-footer {
	background: var(--footer-bg);
	color: var(--strip-heading);
	font-size: 0.9rem;
}
.fro-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2.5rem 1rem 1.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.5rem;
}
.fro-footer .fro-col-heading {
	display: block;
	color: var(--strip-fg-strong);
	font-weight: 700;
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
}
.fro-footer a {
	display: block;
	color: var(--strip-heading);
	text-decoration: none;
	padding: 0.2rem 0;
}
.fro-footer a:hover { color: var(--blue-light); }
.fro-footer-bottom {
	border-top: 1px solid var(--strip-rule);
	text-align: center;
	padding: 1rem;
	color: var(--strip-muted);
	font-size: 0.82rem;
}