/**
 * Legacy entry + theme toggle chrome.
 * Canonical tokens: vg-theme.css · Marketing: vg-homepage.css
 */
@import url("vg-theme.css");
@import url("vg-homepage.css");

.sa-vg-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	min-width: 44px;
	padding: 8px 14px;
	border-radius: var(--vg-radius-pill, 999px);
	border: 1px solid var(--vg-border-accent);
	background: var(--vg-bg-pill-neutral);
	color: var(--vg-text-heading);
	font: 700 13px/1 var(--vg-font-body);
	cursor: pointer;
	transition:
		background var(--vg-motion-fast),
		border-color var(--vg-motion-fast),
		color var(--vg-motion-fast);
	white-space: nowrap;
	touch-action: manipulation;
}

.sa-vg-theme-toggle:hover {
	background: var(--vg-bg-nav-active);
	border-color: var(--vg-border-accent);
	color: var(--vg-text-heading);
}

.sa-vg-theme-toggle:focus {
	outline: none;
}

.sa-vg-theme-toggle:focus-visible {
	outline: 2px solid var(--vg-brand-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--vg-brand-primary) 24%, transparent);
}

.sa-vg-theme-toggle__icon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--vg-state-warn-fg) 0%, var(--vg-brand-primary) 100%);
	box-shadow: inset 0 0 0 1px var(--vg-border-secondary);
	flex-shrink: 0;
}

html[data-theme="light"] .sa-vg-theme-toggle__icon {
	background: linear-gradient(135deg, var(--vg-brand-primary) 0%, var(--vg-text-heading) 100%);
}

.sa-vis-platform-header-actions,
body.sa-vg-theme .sa-vg-shell-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

@media (max-width: 760px) {
	.sa-vis-platform-header-actions {
		width: 100%;
		justify-content: stretch;
		flex-direction: column;
	}

	.sa-vis-platform-header-actions .sa-vg-theme-toggle {
		width: 100%;
	}
}

html[data-theme="light"] .sa-vis-body--platform,
html[data-theme="light"] .sa-vis-body--profile {
	--vg-bg-page: #eef2f7;
	--vg-bg-surface: #ffffff;
	--vg-bg-elevated: #f8fbff;
	--vg-bg-inset: #f1f5f9;
	--vg-bg-footer: #e2e8f0;
	--vg-bg-muted: rgba(15, 23, 42, 0.04);
	--vg-bg-pill-neutral: rgba(15, 23, 42, 0.06);
	--vg-bg-hero: linear-gradient(135deg, #0b1223 0%, #172554 45%, #115e59 100%);
	--vg-bg-hero-summary: linear-gradient(135deg, #ffffff 0%, #eff6ff 52%, #e0f2fe 100%);
	--vg-bg-hero-cta: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
	--vg-bg-header: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.92));
	--vg-bg-brand-mark: linear-gradient(135deg, #312e81 0%, #6366f1 100%);
	--vg-bg-nav-active: rgba(99, 102, 241, 0.12);
	--vg-bg-rank-pill: rgba(99, 102, 241, 0.1);
	--vg-bg-hero-panel: rgba(255, 255, 255, 0.08);
	--vg-bg-hero-stat: rgba(255, 255, 255, 0.09);
	--vg-bg-hero-chip: rgba(255, 255, 255, 0.08);
	--vg-bg-hero-loop: rgba(255, 255, 255, 0.1);
	--vg-bg-release: rgba(59, 130, 246, 0.12);
	--vg-text-heading: #0f172a;
	--vg-text-body: #334155;
	--vg-text-muted: #64748b;
	--vg-text-soft: #94a3b8;
	--vg-text-accent: #4f46e5;
	--vg-text-kicker: #4338ca;
	--vg-text-score: #4338ca;
	--vg-text-hero-sub: #dbe5f3;
	--vg-text-hero-muted: #cbd5e1;
	--vg-text-hero-chip: #e2e8f0;
	--vg-text-release: #1d4ed8;
	--vg-text-on-brand: #ffffff;
	--vg-link: #2563eb;
	--vg-link-hover: #1d4ed8;
	--vg-border-subtle: #d8e1ec;
	--vg-border-soft: #e2e8f0;
	--vg-border-input: #cbd5e1;
	--vg-border-accent: rgba(99, 102, 241, 0.35);
	--vg-border-secondary: #cbd5e1;
	--vg-border-meta: #d8e1ec;
	--vg-border-release: rgba(59, 130, 246, 0.25);
	--vg-border-hero-panel: rgba(255, 255, 255, 0.14);
	--vg-border-hero-loop: rgba(255, 255, 255, 0.12);
	--vg-border-hero-chip: rgba(255, 255, 255, 0.14);
	--vg-shadow-card: 0 20px 60px rgba(15, 23, 42, 0.08);
	--vg-shadow-card-strong: 0 24px 64px rgba(15, 23, 42, 0.12);
	--vg-shadow-button: 0 10px 24px rgba(99, 102, 241, 0.22);
	--vg-shadow-button-strong: 0 12px 28px rgba(99, 102, 241, 0.28);
	--vg-state-earned-fg: #166534;
	--vg-state-earned-bg: rgba(34, 197, 94, 0.12);
	--vg-state-earned-border: rgba(34, 197, 94, 0.28);
	--vg-state-earned-notice-fg: #14532d;
	--vg-state-earned-notice-bg: #ecfdf5;
	--vg-state-earned-notice-border: #b7f7d5;
	--vg-state-warn-fg: #92400e;
	--vg-state-warn-bg: rgba(245, 158, 11, 0.14);
	--vg-state-danger-fg: #991b1b;
	--vg-state-neutral-fg: #475569;
	--vg-band-border: #d8e1ec;
	--vg-band-elite-bg: #ecfccb;
	--vg-band-elite-fg: #365314;
	--vg-band-elite-border: rgba(163, 230, 53, 0.45);
	--vg-band-strong-bg: #dcfce7;
	--vg-band-strong-fg: #166534;
	--vg-band-strong-border: rgba(34, 197, 94, 0.35);
	--vg-band-established-bg: #dbeafe;
	--vg-band-established-fg: #1d4ed8;
	--vg-band-established-border: rgba(59, 130, 246, 0.35);
	--vg-band-developing-bg: #fef3c7;
	--vg-band-developing-fg: #92400e;
	--vg-band-developing-border: rgba(245, 158, 11, 0.35);
	--vg-band-emerging-bg: #f1f5f9;
	--vg-band-emerging-fg: #475569;
	--vg-band-emerging-border: rgba(148, 163, 184, 0.35);
	--vg-card-accent-stripe: linear-gradient(90deg, #0f172a 0, #0f766e 70%, #10b981 100%);
	--vg-bg-hero-glow: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 68%);
}

html[data-theme="light"] .sa-vis-body--platform .sa-vis-platform-nav a:focus-visible,
html[data-theme="light"] .sa-vis-body--profile .sa-vis-platform-nav a:focus-visible,
html[data-theme="dark"] .sa-vis-body--platform .sa-vis-platform-nav a:focus-visible,
html[data-theme="dark"] .sa-vis-body--profile .sa-vis-platform-nav a:focus-visible {
	outline: 2px solid var(--vg-brand-primary);
	outline-offset: 2px;
}