/**
 * modules/ogace/assets/css/ogace-theme-compat.css
 * ============================================================================
 * OGACE Network ↔ Online Guide Association THEME COMPATIBILITY LAYER
 *
 * The plugin ships some surfaces (the "webapp"/PWA shell, the "vibe" shell and
 * the social-share widget) in a dark cyberpunk palette. On the light Online
 * Guide Association theme that dark navy/near-black background clashes ("crash")
 * with the page. This layer remaps those component CSS variables to the light
 * OGA brand palette so every plugin surface sits cleanly on the light theme.
 *
 * It only re-points existing CSS custom properties — no markup, no text, no
 * feature is changed. Uses a :root:root selector (specificity 0,0,2) so it wins
 * over the component :root blocks (0,0,1) regardless of load order — no
 * !important needed.
 *
 * Brand: navy #001D6C · deep red #b01c2e · gold #EAB308.
 * @since 2026-07-29
 */

:root:root {
	/* ── OGA brand anchors ───────────────────────────────────────────── */
	--oga-navy:  #001D6C;
	--oga-red:   #b01c2e;
	--oga-gold:  #EAB308;
	--oga-paper: #ffffff;
	--oga-ink:   #14181f;

	/* ── Unified graph-layer accents (G0–G4) — used for icon/tag colours ─ */
	--ogace-g0: #0f9d8c; /* Geo      */
	--ogace-g1: #c08a00; /* Human    */
	--ogace-g2: #3552c4; /* AI       */
	--ogace-g3: #b01c2e; /* Economic */
	--ogace-g4: #7a3ff2; /* Autonomous */

	/* ── Webapp / PWA shell (ogw): dark navy → light brand tints ──────── */
	--ogw-bg0: #ffffff;
	--ogw-bg1: #f6f8fc;
	--ogw-bg2: #eef2fa;
	--ogw-bg3: #e5ecf7;
	--ogw-bg4: #d9e2f1;
	--ogw-fg0: #001D6C;   /* was #ffffff (white on dark) */
	--ogw-fg1: #1a2b52;
	--ogw-fg2: #5a6a86;
	--ogw-fg3: #8493ad;
	--ogw-gold:   #EAB308;
	--ogw-link:   #b01c2e;
	--ogw-link-h: #001D6C;
	/* membership tiers kept, lightly brand-aligned */
	--ogw-t-free:       #0f9d8c;
	--ogw-t-pro:        #c08a00;
	--ogw-t-agency:     #3552c4;
	--ogw-t-enterprise: #7a3ff2;

	/* ── Vibe shell (ogv): lighten the navy backgrounds, keep ink as text ─ */
	--ogv-navy:      #eef2fa;
	--ogv-navy-2:    #e3eaf6;
	--ogv-navy-deep: #ffffff;
	--ogv-paper:     #f6f8fc;
	--ogv-ink:       #14181f;
	--ogv-gold:      #EAB308;
	--ogv-cyan:      #0f9d8c;   /* was neon #00e5ff */
	--ogv-mint:      #0f9d8c;
	--ogv-magenta:   #b01c2e;   /* was neon magenta */
	--ogv-warn:      #d97706;

	/* ── Social-share widget → force its light-mode values ────────────── */
	--ogace-share-bg:     #ffffff;
	--ogace-share-bg-2:   #f1f5f9;
	--ogace-share-fg:     #0f172a;
	--ogace-share-muted:  #64748b;
	--ogace-share-accent: #b01c2e;
}

/* ── Container safety net ───────────────────────────────────────────────
 * If any plugin wrapper still paints a hard dark background inline, gently
 * normalise the common wrappers to the light paper + navy ink so text stays
 * readable on the light theme. Scoped to plugin wrappers only. */
.ogace-webapp,
.ogace-vibe,
.ogw-shell,
.ogv-shell,
.ogace-social-share {
	background-color: var(--oga-paper);
	color: var(--oga-ink);
}

/* ── Icon rendering consistency (emoji-based icons across the plugin) ──── */
.ogace-icon,
[class*="ogace-"] .icon,
.ogace-agent-icon,
.oga-footer-page-icon,
.ogace-assoc-icon {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-style: normal;
	line-height: 1;
	display: inline-block;
}

/* Layer tag colours (G0–G4) — consistent across theme + plugin */
.ogace-layer-g0, .layer-g0 { color: var(--ogace-g0); }
.ogace-layer-g1, .layer-g1 { color: var(--ogace-g1); }
.ogace-layer-g2, .layer-g2 { color: var(--ogace-g2); }
.ogace-layer-g3, .layer-g3 { color: var(--ogace-g3); }
.ogace-layer-g4, .layer-g4 { color: var(--ogace-g4); }

@media (prefers-color-scheme: dark) {
	/* Respect an explicit dark-mode opt-in on the plugin's own shell only. */
	.ogace-vibe[data-theme="dark"],
	.ogace-webapp[data-theme="dark"] {
		background-color: #0a1628;
		color: #d5e1f3;
	}
}