/**
 * Light scheme.
 *
 * tokens.css already flips the palette variables. What it cannot do is undo
 * the decisions that only make sense on a dark page: white text baked into
 * overlays, shadows tuned for black, translucent surfaces that assume
 * something dark behind them, and glows that read as smudges on white.
 *
 * Loaded only when the scheme is light.
 */

[data-wpx-scheme="light"] {
	color-scheme: light;
}

/* ==========================================================================
   Page and panels
   ========================================================================== */

/* The dark theme's radial accent wash turns muddy on white. */
[data-wpx-scheme="light"] body:not(.wpx-has-bg)::before {
	background:
		radial-gradient( 1100px 500px at 10% -10%, rgb(from var(--wpx-accent) r g b / 0.07), transparent 62% ),
		var(--wpx-bg);
}

[data-wpx-scheme="light"] .wpx-has-bg::after {
	background: rgb(255 255 255 / 0.72);
}

[data-wpx-scheme="light"].wpx-boxed .wpx-shell,
[data-wpx-scheme="light"] body:not(.wpx-has-bg).wpx-boxed .wpx-shell {
	background: var(--wpx-surface-1);
	box-shadow: 0 1px 3px rgb(16 24 40 / 0.04), 0 8px 24px -12px rgb(16 24 40 / 0.12);
}

/* ==========================================================================
   Header and footer
   ========================================================================== */

[data-wpx-scheme="light"] .wpx-header {
	background: var(--wpx-surface-1);
	background-image: none;
	border-block-end: 1px solid var(--wpx-border);
}

[data-wpx-scheme="light"] .wpx-header.is-sticky {
	background: rgb(255 255 255 / 0.88);
}

[data-wpx-scheme="light"] .wpx-header.is-scrolled {
	box-shadow: 0 6px 20px -12px rgb(16 24 40 / 0.28);
}

/* The lit top edge is a dark-theme device; a hairline reads better here. */
[data-wpx-scheme="light"] .wpx-header::before { opacity: 0.9; height: 2px; }

[data-wpx-scheme="light"] .wpx-logo-text {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--wpx-text);
}

[data-wpx-scheme="light"] .wpx-footer {
	background: var(--wpx-surface-1);
	background-image: none;
	border-block-start: 1px solid var(--wpx-border);
}

[data-wpx-scheme="light"] .wpx-footer::after { background: none; }
[data-wpx-scheme="light"] .wpx-footer__bar { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-header__inner .wpx-menu > li > a::after {
	background: linear-gradient( 180deg, transparent, rgb(from var(--wpx-accent) r g b / 0.1) );
}

/* ==========================================================================
   Cards
   ========================================================================== */

[data-wpx-scheme="light"] .wpx-card,
[data-wpx-scheme="light"] .wpx-cards-ribbon .wpx-card {
	background: var(--wpx-surface-1);
	border-color: var(--wpx-border);
}

[data-wpx-scheme="light"] .wpx-cards-ribbon .wpx-card__title {
	background: var(--wpx-surface-2);
	color: var(--wpx-text);
}

/* Heavy black shadows look like dirt on a white page. */
[data-wpx-scheme="light"] .wpx-cards-ribbon .wpx-card:hover,
[data-wpx-scheme="light"] .wpx-cards-ribbon .wpx-card:focus-within {
	background: var(--wpx-surface-1);
	box-shadow: 0 12px 28px -14px rgb(16 24 40 / 0.35), 0 0 0 2px var(--wpx-accent);
}

[data-wpx-scheme="light"] .wpx-card__views { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-card__overlay { background: rgb(255 255 255 / 0.78); }
[data-wpx-scheme="light"] .wpx-card__overlay-label { color: var(--wpx-text); }

/* Badges keep white text — they sit on artwork, not on the page. */
[data-wpx-scheme="light"] .wpx-badge { color: #fff; }

/* ==========================================================================
   Widgets and sidebar
   ========================================================================== */

[data-wpx-scheme="light"] .wpx-widget {
	background: var(--wpx-surface-1);
	border-color: var(--wpx-border);
}

[data-wpx-scheme="light"] .wpx-widget__title {
	background: var(--wpx-surface-2);
	color: var(--wpx-text);
}

[data-wpx-scheme="light"] .wpx-sidebar .wpx-widget__title { color: var(--wpx-accent); }

[data-wpx-scheme="light"] .wpx-postlist__link:hover { background: var(--wpx-surface-2); }

/* ==========================================================================
   Forms and controls
   ========================================================================== */

[data-wpx-scheme="light"] input[type="text"],
[data-wpx-scheme="light"] input[type="search"],
[data-wpx-scheme="light"] input[type="email"],
[data-wpx-scheme="light"] input[type="url"],
[data-wpx-scheme="light"] input[type="number"],
[data-wpx-scheme="light"] textarea,
[data-wpx-scheme="light"] select {
	background: var(--wpx-surface-1);
	border-color: var(--wpx-border);
	color: var(--wpx-text);
}

[data-wpx-scheme="light"] .wpx-header .wpx-search__input { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-search__results {
	background: var(--wpx-surface-1);
	box-shadow: 0 12px 32px -12px rgb(16 24 40 / 0.28);
}

[data-wpx-scheme="light"] .wpx-suggestion:hover,
[data-wpx-scheme="light"] .wpx-suggestion.is-active { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-tabs__tab { background: var(--wpx-surface-1); }
[data-wpx-scheme="light"] .wpx-tabs__tab:hover { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-pagination a,
[data-wpx-scheme="light"] .wpx-pagination span { background: var(--wpx-surface-1); }

[data-wpx-scheme="light"] .wpx-nav-toggle {
	background: var(--wpx-surface-2);
	border-color: var(--wpx-border);
}

[data-wpx-scheme="light"] .wpx-nav-toggle__bar,
[data-wpx-scheme="light"] .wpx-nav-toggle__bar::before,
[data-wpx-scheme="light"] .wpx-nav-toggle__bar::after { background: var(--wpx-text); }

/* ==========================================================================
   Article content
   ========================================================================== */

[data-wpx-scheme="light"] .wpx-prose table { background: var(--wpx-surface-1); }

[data-wpx-scheme="light"] .wpx-prose thead th,
[data-wpx-scheme="light"] .wpx-prose table tr:first-child th {
	background: var(--wpx-surface-2);
	background-image: none;
	color: var(--wpx-text);
}

[data-wpx-scheme="light"] .wpx-prose tbody tr:nth-child(odd) { background: rgb(from var(--wpx-surface-2) r g b / 0.5); }

[data-wpx-scheme="light"] .wpx-prose blockquote,
[data-wpx-scheme="light"] .wpx-prose pre,
[data-wpx-scheme="light"] .wpx-prose details { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-prose summary { background: var(--wpx-surface-3); }

[data-wpx-scheme="light"] .wpx-prose code {
	background: var(--wpx-surface-3);
	color: #b45309;
}

[data-wpx-scheme="light"] .wpx-prose img { border-color: var(--wpx-border); }

/* ==========================================================================
   Single game page
   ========================================================================== */

[data-wpx-scheme="light"] .wpx-specs__row { background: var(--wpx-surface-2); }
[data-wpx-scheme="light"] .wpx-specs__row:nth-child(even) { background: var(--wpx-surface-1); }

[data-wpx-scheme="light"] .wpx-req-table thead th { background: var(--wpx-surface-2); color: var(--wpx-text-muted); }

[data-wpx-scheme="light"] .wpx-download { background: var(--wpx-surface-1); }
[data-wpx-scheme="light"] .wpx-download:hover { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-button--store {
	background: var(--wpx-surface-1);
	border-color: var(--wpx-border-strong);
	color: var(--wpx-text);
}

[data-wpx-scheme="light"] .wpx-game__cover img {
	box-shadow: 0 10px 30px -14px rgb(16 24 40 / 0.35);
}

/* ==========================================================================
   Magazine
   ========================================================================== */

/* The mosaic overlay keeps white text over artwork regardless of scheme —
   the scrim is what makes it legible, not the page colour. */
[data-wpx-scheme="light"] .wpx-mosaic__rest {
	background: var(--wpx-surface-1);
	border-color: var(--wpx-border);
}

[data-wpx-scheme="light"] .wpx-mosaic__item-link:hover { background: var(--wpx-surface-2); }

[data-wpx-scheme="light"] .wpx-acard__media { background: var(--wpx-surface-3); }

[data-wpx-scheme="light"] .wpx-rowlist__num { -webkit-text-stroke-color: var(--wpx-border-strong); }

[data-wpx-scheme="light"] .wpx-comment__body { background: var(--wpx-surface-2); }

/* ==========================================================================
   Shadows
   ==========================================================================
   Every elevation token is retuned: black at 45% is invisible on a dark page
   and looks like a stain on a white one.
   ========================================================================== */

[data-wpx-scheme="light"] {
	--wpx-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
	--wpx-shadow:    0 4px 12px -6px rgb(16 24 40 / 0.18);
	--wpx-shadow-lg: 0 16px 36px -18px rgb(16 24 40 / 0.28);
	--wpx-shadow-accent: 0 8px 20px -10px rgb(from var(--wpx-accent) r g b / 0.45);
}

[data-wpx-scheme="light"] .wpx-to-top { box-shadow: 0 8px 20px -8px rgb(from var(--wpx-accent) r g b / 0.5); }