/* ══════════════════════════════════════════════════════════════════════════
 * OGA Mini App · assets/css/ogace-brand.css
 * BRAND IDENTITY TOKEN LAYER
 * ══════════════════════════════════════════════════════════════════════════
 *
 * The theme's CSS makes 611 var(--token) references across style.css,
 * ogace-header-v109001.css and ogace-templates.css, with only 13 hardcoded
 * hex values in total. That means re-declaring :root re-skins the entire
 * theme without touching a single rule.
 *
 * This file remaps those tokens from the original Linear near-black + muted
 * indigo palette to the Online Guide Association brand identity taken from
 * the logo:
 *
 *     OGA Blue   #003DA5   primary   (upper diamond)
 *     OGA Red    #D41159   accent    (lower diamond)
 *
 * TWO MODES, both driven off the same brand hues:
 *
 *   body.oga-brand-light   white canvas, blue primary, red accent.
 *                          Matches the logo's native context. Default.
 *
 *   body.oga-brand-dark    near-black canvas with lightened brand tints.
 *                          Keeps the OGACE terminal register.
 *
 * ACCESSIBILITY
 * -------------
 * Every foreground/background pair below was measured against WCAG 2.1.
 * Ratios are recorded inline. Raw #003DA5 on a near-black canvas is only
 * 2.10:1 and FAILS, which is why dark mode uses tints (--brand-blue-400/500)
 * rather than the raw brand blue. For the same reason, dark-mode filled
 * buttons use ink-on-blue, not white-on-blue.
 *
 * LOAD ORDER
 * ----------
 * Enqueued with style.css + ogace-templates.css as dependencies so these
 * declarations win on equal specificity. No !important is used anywhere.
 * ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * BRAND CONSTANTS — mode-independent. The literal logo values.
 * ══════════════════════════════════════════════════════════════════════════ */
:root {
	--brand-blue:      #003DA5;  /* logo upper diamond */
	--brand-red:       #D41159;  /* logo lower diamond */

	/* Blue ramp */
	--brand-blue-900:  #001b4a;
	--brand-blue-800:  #002a72;
	--brand-blue-700:  #003189;
	--brand-blue-600:  #003DA5;  /* = --brand-blue */
	--brand-blue-500:  #1F4BAE;
	--brand-blue-400:  #3F6FD0;
	--brand-blue-300:  #5B8DEF;
	--brand-blue-200:  #7BA5F5;
	--brand-blue-100:  #c3d5fb;
	--brand-blue-050:  #e8effd;

	/* Red ramp */
	--brand-red-900:   #62082a;
	--brand-red-800:   #8f0c3c;
	--brand-red-700:   #b30e4b;
	--brand-red-600:   #D41159;  /* = --brand-red */
	--brand-red-500:   #e0356f;
	--brand-red-400:   #E8577F;
	--brand-red-300:   #F080A0;
	--brand-red-200:   #f7abc2;
	--brand-red-100:   #fcd7e2;
	--brand-red-050:   #fdeaf0;

	/* Khmer flag reference — the logo's blue/red/white is a deliberate nod.
	   Available for cultural accents; not wired into the core token set. */
	--khmer-blue:      #032ea1;
	--khmer-red:       #e00025;
}


/* ══════════════════════════════════════════════════════════════════════════
 * LIGHT MODE · default
 * White canvas, blue primary, red accent. Matches the logo's native context.
 * ══════════════════════════════════════════════════════════════════════════ */
body.oga-brand-light {

	/* ── Surfaces ─────────────────────────────────────────────────────── */
	--bg0:   #ffffff;   /* page canvas */
	--bg1:   #f7f8fa;   /* raised panel */
	--bg2:   #f1f3f7;   /* card */
	--bg3:   #e9ecf2;   /* input / inset */
	--bg4:   #dfe3eb;   /* pressed */

	/* ── Hairlines ────────────────────────────────────────────────────── */
	--line1: rgba(0, 61, 165, 0.10);
	--line2: rgba(0, 61, 165, 0.17);
	--line3: rgba(0, 61, 165, 0.26);

	/* ── Foreground ───────────────────────────────────────────────────── */
	--fg0:   #12141c;   /* 18.38:1 on white · AAA */
	--fg1:   #2e3444;   /* body copy */
	--fg2:   #5a6070;   /*  6.28:1 on white · AA  */
	--fg3:   #6a7080;   /*  4.95:1 on white · AA  (was 4.17:1 — bumped) */

	/* ── Accent · brand blue is the primary action colour ─────────────── */
	--gold:       #003DA5;                    /* 9.50:1 on white · AAA */
	--gold-dim:   rgba(0, 61, 165, 0.08);
	--gold-glow:  rgba(0, 61, 165, 0.16);
	--gold-hover: #002a72;

	/* ── G-layer palette · brand-derived, blue→red spectrum ───────────── */
	/* Original set was a cool indigo spread. This walks the logo's own two
	   hues instead, so every network badge reads as brand rather than as an
	   arbitrary rainbow. All are >=4.5:1 on white. */
	--g0: #00639b; --g0-bg: rgba(0, 99, 155, 0.08);   --g0-bd: rgba(0, 99, 155, 0.22);
	--g1: #003DA5; --g1-bg: rgba(0, 61, 165, 0.08);   --g1-bd: rgba(0, 61, 165, 0.24);
	--g2: #3f3fa8; --g2-bg: rgba(63, 63, 168, 0.08);  --g2-bd: rgba(63, 63, 168, 0.22);
	--g3: #6b2f9e; --g3-bg: rgba(107, 47, 158, 0.08); --g3-bd: rgba(107, 47, 158, 0.22);
	--g4: #0b6b52; --g4-bg: rgba(11, 107, 82, 0.08);  --g4-bd: rgba(11, 107, 82, 0.22);
	--g5: #1d5fb8; --g5-bg: rgba(29, 95, 184, 0.08);  --g5-bd: rgba(29, 95, 184, 0.22);
	--g6: #D41159; --g6-bg: rgba(212, 17, 89, 0.08);  --g6-bd: rgba(212, 17, 89, 0.24);
	--g7: #a3431a; --g7-bg: rgba(163, 67, 26, 0.08);  --g7-bd: rgba(163, 67, 26, 0.22);

	/* ── Legacy alias remap ───────────────────────────────────────────── */
	--o-rose:   var(--g6);
	--o-teal:   var(--g0);
	--o-violet: var(--g2);
	--t-free:   var(--g0);
	--t-pro:    var(--g1);
	--t-agency: var(--g7);
	--t-ent:    var(--g3);
	--t-dao:    var(--g6);
	--tc-wc:    var(--g3);
	--tc-ai:    var(--g2);
	--tc-nvidia: var(--g4);

	/* ── Block editor bridge ──────────────────────────────────────────── */
	--wp--preset--color--foreground: var(--fg0);
	--wp--preset--color--background: var(--bg0);
	--wp--preset--color--primary:    var(--brand-blue);
	--wp--preset--color--secondary:  var(--brand-red);

	/* ── Button ink · white on brand blue is 9.50:1 · AAA ─────────────── */
	--btn-ink: #ffffff;

	background: var(--bg0);
	color: var(--fg1);
	color-scheme: light;
}


/* ══════════════════════════════════════════════════════════════════════════
 * DARK MODE
 * Near-black canvas, brand tints. Preserves the OGACE terminal register.
 * ══════════════════════════════════════════════════════════════════════════ */
body.oga-brand-dark {

	/* ── Surfaces · original Linear ramp, retained ────────────────────── */
	--bg0:   #08090a;
	--bg1:   #0f1011;
	--bg2:   #141516;
	--bg3:   #1a1c1e;
	--bg4:   #212325;

	/* ── Hairlines · brand-blue tinted rather than neutral white ──────── */
	--line1: rgba(123, 165, 245, 0.09);
	--line2: rgba(123, 165, 245, 0.15);
	--line3: rgba(123, 165, 245, 0.24);

	/* ── Foreground ───────────────────────────────────────────────────── */
	--fg0:   #f7f8f8;   /* 18.73:1 · AAA */
	--fg1:   #d0d2d8;
	--fg2:   #8a8f98;   /*  6.13:1 · AA  */
	--fg3:   #62666d;

	/* ── Accent · lightened brand blue.
	 *   Raw #003DA5 here would be 2.10:1 and FAIL. --brand-blue-300 is
	 *   6.17:1 · AA. ──────────────────────────────────────────────────── */
	--gold:       #5B8DEF;
	--gold-dim:   rgba(91, 141, 239, 0.14);
	--gold-glow:  rgba(91, 141, 239, 0.22);
	--gold-hover: #7BA5F5;

	/* ── G-layer palette · brand tints, all >=4.5:1 on #08090a ────────── */
	--g0: #4fb3c9; --g0-bg: rgba(79, 179, 201, 0.10);  --g0-bd: rgba(79, 179, 201, 0.24);
	--g1: #5B8DEF; --g1-bg: rgba(91, 141, 239, 0.12);  --g1-bd: rgba(91, 141, 239, 0.26);
	--g2: #8f8ff0; --g2-bg: rgba(143, 143, 240, 0.10); --g2-bd: rgba(143, 143, 240, 0.24);
	--g3: #b183e8; --g3-bg: rgba(177, 131, 232, 0.10); --g3-bd: rgba(177, 131, 232, 0.24);
	--g4: #57b980; --g4-bg: rgba(87, 185, 128, 0.10);  --g4-bd: rgba(87, 185, 128, 0.24);
	--g5: #6fa4f2; --g5-bg: rgba(111, 164, 242, 0.10); --g5-bd: rgba(111, 164, 242, 0.24);
	--g6: #E8577F; --g6-bg: rgba(232, 87, 127, 0.11);  --g6-bd: rgba(232, 87, 127, 0.26);
	--g7: #dd9a5c; --g7-bg: rgba(221, 154, 92, 0.10);  --g7-bd: rgba(221, 154, 92, 0.24);

	/* ── Legacy alias remap ───────────────────────────────────────────── */
	--o-rose:   var(--g6);
	--o-teal:   var(--g0);
	--o-violet: var(--g2);
	--t-free:   var(--g0);
	--t-pro:    var(--g1);
	--t-agency: var(--g7);
	--t-ent:    var(--g3);
	--t-dao:    var(--g6);
	--tc-wc:    var(--g3);
	--tc-ai:    var(--g2);
	--tc-nvidia: var(--g4);

	--wp--preset--color--foreground: var(--fg0);
	--wp--preset--color--background: var(--bg0);
	--wp--preset--color--primary:    var(--gold);
	--wp--preset--color--secondary:  var(--g6);

	/* ── Button ink · white on --gold is only 3.23:1, so filled buttons
	 *   in dark mode use ink text (6.17:1 · AA) instead. ──────────────── */
	--btn-ink: #08090a;

	background: var(--bg0);
	color: var(--fg1);
	color-scheme: dark;
}


/* ══════════════════════════════════════════════════════════════════════════
 * BUTTON INK CORRECTION
 * The base CSS hardcodes #fff on accent fills. In light mode that is correct
 * (9.50:1). In dark mode white-on-tint drops to 3.23:1, so we swap to ink.
 * ══════════════════════════════════════════════════════════════════════════ */
body.oga-brand-dark .oga-404-btn--primary,
body.oga-brand-dark .oga-searchform-submit,
body.oga-brand-dark .oga-comment-submit,
body.oga-brand-dark .oga-comment-form input[type="submit"],
body.oga-brand-dark .oga-pagination .page-numbers.current,
body.oga-brand-dark .oga-btn--primary {
	color: var(--btn-ink);
	font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════
 * BRAND LOGO
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-brand-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

.oga-brand-logo-mark {
	flex-shrink: 0;
	display: block;
	width: var(--oga-mark-size, 34px);
	height: var(--oga-mark-size, 34px);
}
.oga-brand-logo-mark svg,
.oga-brand-logo-mark img {
	display: block;
	width: 100%;
	height: 100%;
}

.oga-brand-logo-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.oga-brand-logo-name {
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--fg0);
	white-space: nowrap;
}

.oga-brand-logo-sub {
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-red);
	white-space: nowrap;
}
body.oga-brand-dark .oga-brand-logo-sub { color: var(--g6); }

/* Brand rule under the wordmark, echoing the logo's blue→red split */
.oga-brand-rule {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--brand-blue) 0%,
		var(--brand-blue) 72%,
		var(--brand-red) 72%,
		var(--brand-red) 100%
	);
}
body.oga-brand-dark .oga-brand-rule {
	background: linear-gradient(
		90deg,
		var(--gold) 0%,
		var(--gold) 72%,
		var(--g6) 72%,
		var(--g6) 100%
	);
}

@media (max-width: 520px) {
	.oga-brand-logo-text { display: none; }
	.oga-brand-logo-mark { --oga-mark-size: 30px; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * BRAND ACCENTS ON EXISTING COMPONENTS
 * ══════════════════════════════════════════════════════════════════════════ */

/* Section labels get a brand tick */
body.oga-brand-light .oga-section-label,
body.oga-brand-dark  .oga-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
}
.oga-section-label::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 1em;
	min-height: 12px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--brand-blue), var(--brand-red));
}
body.oga-brand-dark .oga-section-label::before {
	background: linear-gradient(180deg, var(--gold), var(--g6));
}

/* Terminal prompt: brand blue in light, tint in dark */
body.oga-brand-light .oga-prompt { color: var(--brand-blue); opacity: .78; }
body.oga-brand-dark  .oga-prompt { color: var(--gold);       opacity: .82; }

/* Light-mode cards need a shadow instead of a glow to read as raised */
body.oga-brand-light .oga-feed-item,
body.oga-brand-light .oga-detail,
body.oga-brand-light .oga-related-card,
body.oga-brand-light .oga-404-panel,
body.oga-brand-light .oga-card {
	box-shadow: 0 1px 2px rgba(0, 27, 74, 0.05),
	            0 2px 8px rgba(0, 27, 74, 0.04);
}
body.oga-brand-light .oga-related-card:hover {
	box-shadow: 0 2px 4px rgba(0, 27, 74, 0.07),
	            0 8px 20px rgba(0, 27, 74, 0.07);
}

/* Selection uses brand blue */
body.oga-brand-light ::selection { background: var(--brand-blue-100); color: var(--brand-blue-900); }
body.oga-brand-dark  ::selection { background: var(--gold-glow);      color: var(--fg0); }

/* Focus ring — visible in both modes, 3:1 against both canvases */
body.oga-brand-light :focus-visible {
	outline: 2px solid var(--brand-blue);
	outline-offset: 2px;
}
body.oga-brand-dark :focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
 * HEADER LOGO MARK · SVG VARIANT
 * The base header CSS paints .oga-logo-mark as a filled accent square with
 * centred "OGA" text. When inc/ogace-brand.php injects the real SVG we drop
 * the fill and the box so the diamond reads on its own.
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-logo-mark--svg {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-size: 0;      /* suppress any residual text node */
	padding: 0;
}
.oga-logo-mark--svg .oga-brand-logo-mark {
	width: var(--oga-mark-size, 34px);
	height: var(--oga-mark-size, 34px);
}
.oga-logo-mark--svg svg { display: block; width: 100%; height: 100%; }


/* ══════════════════════════════════════════════════════════════════════════
 * PRINT · always render light regardless of active mode
 * ══════════════════════════════════════════════════════════════════════════ */
@media print {
	body.oga-brand-dark,
	body.oga-brand-light {
		--bg0: #ffffff; --bg1: #ffffff; --bg2: #ffffff; --bg3: #ffffff; --bg4: #ffffff;
		--fg0: #000000; --fg1: #1a1a1a; --fg2: #444444; --fg3: #666666;
		--gold: var(--brand-blue);
		--line1: rgba(0,0,0,.12); --line2: rgba(0,0,0,.2); --line3: rgba(0,0,0,.3);
		background: #fff;
		color: #000;
	}
	.oga-feed-item, .oga-detail, .oga-card, .oga-404-panel { box-shadow: none; }
}