/*
 * GeoMatch site — Tier 4 (project) styles on top of GL-Solutions.AI Layer-1 tokens (gl-tokens.css).
 * Components use only the semantic tokens below; raw brand hexes live in gl-tokens.css.
 *
 * Token roles (see gl-skill-web-design theme contract):
 *   --accent        gold used as a SURFACE (button fill, header rule) — identical in both themes
 *   --accent-on     text on an --accent surface
 *   --accent-fg     gold used as TEXT/ICON on the page ground — flips between themes
 */

:root {
	color-scheme: light dark;

	--font: -apple-system, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
	--measure: 42rem;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--radius: 0.5rem;

	/* light theme */
	--page-bg: var(--gl-bone);
	--page-fg: var(--gl-ink);
	--muted-fg: #595959;
	--rule: #e3e0d8;
	--panel-bg: #f7f5f0;
	--accent: var(--gl-gold);
	--accent-on: var(--gl-ink);
	--accent-fg: #7a5a1c; /* deep gold darkened for text contrast on white */
	--link-underline: var(--gl-gold-deep);
	--focus: var(--gl-gold-deep);
}

@media (prefers-color-scheme: dark) {
	:root {
		--page-bg: #141414;
		--page-fg: #f2f2f2;
		--muted-fg: #b5b5b5;
		--rule: #333333;
		--panel-bg: #1e1e1e;
		--accent-fg: var(--gl-gold-bright);
		--link-underline: var(--gl-gold);
		--focus: var(--gl-gold-bright);
	}
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--page-fg);
	background: var(--page-bg);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--link-underline);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 3px; }
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip {
	position: absolute;
	left: -999px;
}
.skip:focus { left: var(--space-3); top: var(--space-3); background: var(--page-bg); padding: var(--space-2); }

/* ── header ─────────────────────────────────────────────── */
.site-header {
	border-bottom: 3px solid var(--accent);
}
.site-header .inner, main, .site-footer .inner {
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
	padding-inline: var(--space-4);
}
.site-header .inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
}
.brand {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
	margin-right: auto;
}
.brand img { width: 2.25rem; height: 2.25rem; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
	.logo-light { display: none; }
	.logo-dark { display: inline; }
}
.site-nav { display: flex; gap: var(--space-4); }
.site-nav a { text-decoration: none; }
.site-nav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--link-underline);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* ── content ───────────────────────────────────────────── */
main { flex: 1; padding-block: var(--space-5) var(--space-6); }
main > * { max-width: var(--measure); }
main > .wide { max-width: none; }

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.25rem); line-height: 1.15; margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; line-height: 1.25; margin: var(--space-5) 0 var(--space-2); }
h3 { font-size: 1.1rem; margin: var(--space-4) 0 var(--space-1); }
p, ul, ol { margin: 0 0 var(--space-3); }
li { margin-bottom: var(--space-1); }

.lede { font-size: 1.25rem; color: var(--muted-fg); max-width: 38rem; }
.eyebrow {
	color: var(--accent-fg);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}
.muted { color: var(--muted-fg); }
.small { font-size: 0.9rem; }

.steps {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
	gap: var(--space-3);
	counter-reset: step;
}
.steps li {
	background: var(--panel-bg);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	margin: 0;
}
.steps li::before {
	counter-increment: step;
	content: counter(step);
	display: inline-block;
	font-weight: 700;
	color: var(--accent-on);
	background: var(--accent);
	border-radius: 999px;
	width: 1.75rem;
	height: 1.75rem;
	text-align: center;
	line-height: 1.75rem;
	margin-bottom: var(--space-2);
}
.steps strong { display: block; }

.panel {
	background: var(--panel-bg);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	margin-block: var(--space-4);
}
.panel > :last-child { margin-bottom: 0; }

.button {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-on);
	font-weight: 700;
	text-decoration: none;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius);
}
.button:hover { text-decoration: underline; text-decoration-color: var(--accent-on); }

table { border-collapse: collapse; width: 100%; margin-bottom: var(--space-3); font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; }
th[scope="row"] { width: 14rem; padding-right: var(--space-3); }
@media (max-width: 40rem) { th[scope="row"] { width: 8.5rem; } }

kbd, code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.9em;
	background: var(--panel-bg);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 0 0.3em;
}

.toc { font-size: 0.95rem; }
.toc ol { padding-left: 1.25rem; }

/* ── footer (Layer-1 .gl-footer markup; publisher line, no customer) ── */
.site-footer .inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; text-align: left; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.site-footer nav a { white-space: nowrap; }