/*
 * Game Pulse look: diablo4 (2.3). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="diablo4"] and .is-game-diablo4, then the game's own touches, all scoped to this game.
 *
 * Diablo IV, gothic: blood red on black stone, bone-coloured text and an engraved serif for titles. Drawn in CSS; no
 * game art.
 *
 * Font (SIL Open Font License 1.1, licence text in assets/fonts/rs3/OFL.txt): Cinzel by Natanael Gama, the file the
 * RuneScape 3 look already bundles (from the npm package @fontsource/cinzel), for titles only.
 */

@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/rs3/cinzel-latin-700-normal.woff2") format("woff2");
}

[data-game="diablo4"],
.is-game-diablo4 {
	--gp-surface: light-dark(#F2EDE6, #130E0D);
	--gp-surface-2: light-dark(#FBF8F3, #1B1413);
	--gp-surface-sunk: light-dark(#E5DDD2, #0B0807);
	--gp-ink: light-dark(#2A1D1A, #E8DCC8);
	--gp-ink-muted: light-dark(#6A5850, #B4A390);
	--gp-ink-strong: light-dark(#160F0D, #FFF4E2);
	--gp-accent: light-dark(#9B1C1C, #C8312B);
	--gp-accent-ink: #FFF3E6;
	--gp-accent-2: light-dark(#8A6A3C, #C9A66B);
	--gp-title-ink: light-dark(#7A1414, #D9B98A);
	--gp-title-shadow: light-dark(none, 0 1px 0 #000000);
	--gp-head-font: "Cinzel", Georgia, "Times New Roman", serif;
	--gp-frame-border: 1px solid light-dark(#C7B6A2, #3B2622);
	--gp-frame-radius: 3px;
	--gp-frame-shadow: inset 0 0 0 1px light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03)), 0 14px 30px -18px rgba(0, 0, 0, 0.8);
	--gp-tab-bg: #120B0A;
	--gp-tab-ink: #D7C6AE;
	--gp-tab-active-bg: #7A1414;
	--gp-tab-active-ink: #FFF3E6;
	--gp-btn-bg: light-dark(#FBF8F3, #1B1413);
	--gp-btn-ink: light-dark(#2A1D1A, #E8DCC8);
	--gp-btn-border: 1px solid light-dark(#C7B6A2, #4A2E28);
	--gp-btn-hover-bg: light-dark(#F1E2D6, #26191A);
	--gp-grid-line: light-dark(#DDD0C1, #2E201D);
	--gp-pop-bg: light-dark(#FBF8F3, #1B1413);
	--gp-pop-border: 1px solid #7A1414;
	--gp-series-1: #C8312B;
	--gp-hero-bg:
		radial-gradient(50rem 18rem at 50% 125%, rgba(200, 49, 43, 0.45), transparent 70%),
		radial-gradient(24rem 10rem at 12% -2rem, rgba(201, 166, 107, 0.14), transparent 70%),
		linear-gradient(180deg, #070505, #1A0F0D);
	--gp-hero-rule: #7A1414;
	--gp-hero-accent: #E2B77C;
	--gp-hero-title: #EBD6B2;
	--gp-hero-ink: #DCCDB6;
	--gp-hero-pill: rgba(201, 166, 107, 0.5);
	--gp-tabs-bg: #120B0A;
	--gp-tabs-rule: #3B2622;
	--gp-tabs-ink: #D7C6AE;
	--gp-tabs-active: #E2B77C;
	--gp-body-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-num-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-frame-image: none;
	--gp-tab-shape: none;
	--gp-table-head-bg: #120B0A;
	--gp-table-head-ink: #E2B77C;
	--gp-row-alt: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.03));
	--gp-row-hover: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
	--gp-good: light-dark(#1F6B35, #7AD69A);
	--gp-bad: light-dark(#A12A1F, #FF9C88);
	--gp-warn: light-dark(#8A5A00, #F2C25C);
	--gp-pop-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}

/* The "About this page" fold sits on the page, not on a panel: the accent as text, at 4.5:1 in either scheme. */
:is(body.is-game-diablo4, [data-game="diablo4"]) .gp-about > summary {
	color: light-dark(#9B1C1C, #E2B77C);
}