/**
 * Visibility Growth design tokens — LP "fresh" palette (light only).
 * Drop-in replacement for assets/css/vg-theme.css in seo-arcanum-client-agent.
 * Source of values: localprofiles.co.uk --lp-* tokens / Elementor kit (Oct 2026).
 *
 * Also required (see notes at bottom):
 *  1. sa-vg-platform-theme.css → delete the html[data-theme="light"] token block (lines with --vg-bg-page … --vg-bg-hero-glow).
 *  2. FOUC script #sa-vg-platform-theme-fouc → default t="light" (or remove the toggle entirely).
 *  3. Enqueue Google Fonts: Sora 600/700 + Figtree 400/500/600/700 on /visibility/* routes.
 */
html[data-theme="dark"],
html[data-theme="light"] { color-scheme: light; }

.sa-vis-body--platform,
.sa-vis-body--profile,
body.sa-vg-theme {
	--vg-space-xs: 6px;
	--vg-space-sm: 10px;
	--vg-space-md: 16px;
	--vg-space-lg: 24px;
	--vg-space-xl: 32px;
	--vg-radius-sm: 14px;
	--vg-radius-md: 16px;
	--vg-radius-lg: 20px;
	--vg-radius-pill: 999px;
	--vg-shadow-sm: 0 8px 24px rgba(11, 28, 36, 0.06);
	--vg-shadow-md: var(--vg-shadow-card);
	--vg-shadow-lg: var(--vg-shadow-card-strong);
	--vg-motion-fast: 0.16s ease;
	--vg-motion-medium: 0.24s ease;
	--vg-font-heading: "Sora", "Segoe UI", sans-serif;
	--vg-font-body: "Figtree", "Segoe UI", sans-serif;

	/* Surfaces */
	--vg-bg-page: #F3F7F8;
	--vg-bg-surface: #FFFFFF;
	--vg-bg-elevated: #FFFFFF;
	--vg-bg-inset: #EAF4F5;
	--vg-bg-footer: #EAF4F5;
	--vg-bg-muted: rgba(11, 28, 36, 0.04);
	--vg-bg-pill-neutral: rgba(11, 28, 36, 0.06);
	--vg-bg-hero: radial-gradient(1000px 480px at 12% -10%, rgba(13, 138, 132, 0.22), rgba(13, 138, 132, 0) 60%), #FFFFFF;
	--vg-bg-hero-summary: linear-gradient(135deg, #FFFFFF 0%, #F3F7F8 60%, #EAF6F5 100%);
	--vg-bg-hero-cta: linear-gradient(180deg, #FFFFFF 0%, #EAF6F5 100%);
	--vg-bg-header: rgba(255, 255, 255, 0.92);
	--vg-bg-brand-mark: linear-gradient(135deg, #0A6F6A 0%, #0D8A84 100%);
	--vg-bg-nav-active: rgba(13, 138, 132, 0.10);
	--vg-bg-rank-pill: rgba(13, 138, 132, 0.10);
	--vg-bg-hero-panel: rgba(255, 255, 255, 0.88);
	--vg-bg-hero-stat: #FFFFFF;
	--vg-bg-hero-chip: #D9F3F1;
	--vg-bg-hero-loop: rgba(13, 138, 132, 0.06);
	--vg-bg-release: rgba(13, 138, 132, 0.10);
	--vg-bg-hero-glow: radial-gradient(circle, rgba(13, 138, 132, 0.16), rgba(13, 138, 132, 0) 68%);

	/* Text — hero tokens flip to dark because the hero is now light */
	--vg-text-heading: #0B1C24;
	--vg-text-body: #24343B;
	--vg-text-muted: #5B6B73;
	--vg-text-soft: #8A9AA1;
	--vg-text-accent: #0D8A84;
	--vg-text-kicker: #0A6F6A;
	--vg-text-score: #0A6F6A;
	--vg-text-hero-sub: #24343B;
	--vg-text-hero-muted: #5B6B73;
	--vg-text-hero-chip: #0A6F6A;
	--vg-text-release: #0A6F6A;
	--vg-text-on-brand: #FFFFFF;
	--vg-text-primary: var(--vg-text-heading);
	--vg-text-secondary: var(--vg-text-body);

	/* Brand + links */
	--vg-brand-primary: #0D8A84;
	--vg-brand-secondary: #0A6F6A;
	--vg-link: #0A6F6A;
	--vg-link-hover: #075955;

	/* Borders */
	--vg-border-subtle: #D7E2E6;
	--vg-border-soft: #E6EEF0;
	--vg-border-input: #C9D6DB;
	--vg-border-accent: rgba(13, 138, 132, 0.35);
	--vg-border-secondary: #D7E2E6;
	--vg-border-meta: #D7E2E6;
	--vg-border-release: rgba(13, 138, 132, 0.25);
	--vg-border-hero-panel: #D7E2E6;
	--vg-border-hero-loop: #D7E2E6;
	--vg-border-hero-chip: rgba(13, 138, 132, 0.25);

	/* Shadows */
	--vg-shadow-card: 0 10px 28px rgba(11, 28, 36, 0.06);
	--vg-shadow-card-strong: 0 22px 50px rgba(11, 28, 36, 0.10);
	--vg-shadow-button: 0 10px 24px rgba(13, 138, 132, 0.28);
	--vg-shadow-button-strong: 0 12px 28px rgba(13, 138, 132, 0.34);

	/* States (semantic — unchanged hues, light-surface values) */
	--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;

	/* Medals (unchanged) */
	--vg-medal-gold-bg: linear-gradient(135deg, #FEF3C7, #F59E0B);
	--vg-medal-gold-border: #FBBF24;
	--vg-medal-gold-fg: #4A2D00;
	--vg-medal-silver-bg: linear-gradient(135deg, #E2E8F0, #94A3B8);
	--vg-medal-silver-border: #CBD5E1;
	--vg-medal-silver-fg: #1E293B;
	--vg-medal-bronze-bg: linear-gradient(135deg, #FDE68A, #F97316);
	--vg-medal-bronze-border: #FDBA74;
	--vg-medal-bronze-fg: #7C2D12;

	/* Score bands (semantic) */
	--vg-band-border: var(--vg-border-subtle);
	--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: #D9F3F1;
	--vg-band-established-fg: #0A6F6A;
	--vg-band-established-border: rgba(13, 138, 132, 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, #0B1C24 0, #0D8A84 70%, #5EC4BD 100%);
}

/*
 * Three hard-coded values in the platform CSS ignore the tokens above.
 * Proper fix: edit the source files. Until then these overrides win on specificity.
 *   vg-platform.css        .sa-vis-body--platform { font-family: Avenir Next… }   → var(--vg-font-body)
 *   vg-platform-layout.css .sa-vis-hero h1, .sa-vis-section h2 { font-family: Georgia… } → var(--vg-font-heading)
 *   vg-platform.css        .sa-vis-hero { color: var(--vg-text-on-brand) }       → var(--vg-text-heading)
 *                          (hero used "on-brand" white because it was dark; buttons keep on-brand)
 */
body.sa-vis-body--platform,
body.sa-vis-body--profile { font-family: var(--vg-font-body); }

body.sa-vis-body--platform .sa-vis-hero h1,
body.sa-vis-body--platform .sa-vis-section h2,
body.sa-vis-body--profile .sa-vis-hero h1,
body.sa-vis-body--profile .sa-vis-section h2 { font-family: var(--vg-font-heading); letter-spacing: -0.02em; }

body.sa-vis-body--platform .sa-vis-hero,
body.sa-vis-body--profile .sa-vis-hero { color: var(--vg-text-heading); border: 1px solid var(--vg-border-subtle); }

/* The Dark/Light toggle now does nothing — hide it until it's removed from the header template. */
.sa-vg-theme-toggle { display: none !important; }