/* =========================================================================
 * POGO — theme layer. Loaded LAST on every page.
 *
 * Light mode is the design as authored (tokens in pogo-redesign.css :root).
 * Everything below only applies when html[data-theme="dark"].
 * Colours must come from --pg-* tokens; this file only (a) re-points the tokens and
 * (b) fixes the few things that cannot be expressed as a token (third-party widgets,
 * raster logos, native controls).
 * ====================================================================== */

/* ---- Theme toggle (header + mobile) --------------------------------- */
.pogo-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pg-ink);
	cursor: pointer;
	transition: background .18s ease, opacity .18s ease;
}
.pogo-theme-toggle:hover { background: var(--pg-soft); }
.pogo-theme-toggle:focus-visible { outline: 2px solid var(--pg-ink); outline-offset: 2px; }
.pogo-theme-toggle .pogo-theme-toggle__sun { display: none; }
html[data-theme="dark"] .pogo-theme-toggle .pogo-theme-toggle__sun { display: block; }
html[data-theme="dark"] .pogo-theme-toggle .pogo-theme-toggle__moon { display: none; }

/* ---- Dark palette ---------------------------------------------------- */
html[data-theme="dark"] {
	color-scheme: dark;

	--pg-ink: #f2f0ec;
	--pg-paper: #0c0c0b;
	--pg-soft: #171716;
	--pg-line: #2a2927;
	--pg-line-soft: #222120;
	--pg-line-dk: #3a3936;
	--pg-mute: #9d9a93;
	--pg-on-ink: #0a0a0a;
	--pg-deep: #1a1a18;
	--pg-media: #ffffff;






	/* @tokens:start — generated; light values live in pogo-redesign.css :root */
	--pg-x-0088cc: #307191;
	--pg-x-0b2b28: #6ddacf;
	--pg-x-0b3b36: #64e2d5;
	--pg-x-0e433d: #67dfd2;
	--pg-x-1a1916: #e6e4df;
	--pg-x-1d8a4e: #67df9d;
	--pg-x-1e1e1e: #e6e4df;
	--pg-x-1f7a3d: #6dda91;
	--pg-x-1f8a4c: #69dd9a;
	--pg-x-232220: #e6e4df;
	--pg-x-27ae60: #309159;
	--pg-x-292929: #e6e4df;
	--pg-x-2a2926: #e6e4df;
	--pg-x-3a3a38: #e6e4df;
	--pg-x-3a3a3a: #e6e4df;
	--pg-x-434a53: #e6e4df;
	--pg-x-454239: #e6e4df;
	--pg-x-4a4843: #e6e4df;
	--pg-x-54534f: #e6e4df;
	--pg-x-555555: #e6e4df;
	--pg-x-5b5854: #e6e4df;
	--pg-x-5b5b5b: #e6e4df;
	--pg-x-5d5a50: #e6e4df;
	--pg-x-666666: #e6e4df;
	--pg-x-6b6863: #e6e4df;
	--pg-x-6e6e6e: #e6e4df;
	--pg-x-777777: #e6e4df;
	--pg-x-7d7d7d: #e6e4df;
	--pg-x-7e7c77: #e6e4df;
	--pg-x-8a5a2b: #d3a373;
	--pg-x-8c887d: #a29f98;
	--pg-x-8f8f8f: #a29f98;
	--pg-x-8fd6cd: #183f3a;
	--pg-x-9a978f: #a29f98;
	--pg-x-9a9a9a: #a29f98;
	--pg-x-aba9a4: #a29f98;
	--pg-x-b3b3b3: #a29f98;
	--pg-x-b4362c: #db746b;
	--pg-x-b4b1aa: #a29f98;
	--pg-x-b4b1ab: #a29f98;
	--pg-x-b5b1a8: #a29f98;
	--pg-x-b6b3ad: #a29f98;
	--pg-x-b7b7b7: #a29f98;
	--pg-x-b8e7e0: #183f39;
	--pg-x-b9b6b0: #34332f;
	--pg-x-bdbdbd: #a29f98;
	--pg-x-c0392b: #dd7469;
	--pg-x-c63a2c: #de7369;
	--pg-x-c8102e: #e85e75;
	--pg-x-c9bd86: #c9bd86;
	--pg-x-c9c6c0: #34332f;
	--pg-x-ca0d0d: #e85e5e;
	--pg-x-cccccc: #34332f;
	--pg-x-cdcbc4: #a29f98;
	--pg-x-d0021b: #e85e6f;
	--pg-x-d2604f: #da7b6d;
	--pg-x-d9d7d2: #2a2927;
	--pg-x-d9d9d9: #34332f;
	--pg-x-ddd6c6: #363020;
	--pg-x-dddddd: #34332f;
	--pg-x-dedede: #34332f;
	--pg-x-e0795f: #e17e65;
	--pg-x-e0e0e0: #34332f;
	--pg-x-e1e0dc: #2a2927;
	--pg-x-e2e2e2: #34332f;
	--pg-x-e4e4ea: #2a2927;
	--pg-x-e5e5e5: #2a2927;
	--pg-x-e6e6e6: #34332f;
	--pg-x-e8e6e1: #2a2927;
	--pg-x-e8e8ef: #1d1c1b;
	--pg-x-e9e9e9: #1d1c1b;
	--pg-x-eaeaea: #34332f;
	--pg-x-ece7dc: #38301f;
	--pg-x-f0d6bf: #915e30;
	--pg-x-f0eee9: #34332f;
	--pg-x-f2f2f2: #1d1c1b;
	--pg-x-f3f3f6: #1d1c1b;
	--pg-x-f3f3f7: #1d1c1b;
	--pg-x-f4f1ea: #1d1c1b;
	--pg-x-f4f2ec: #1d1c1b;
	--pg-x-f4f3f0: #1d1c1b;
	--pg-x-f5e003: #3f3b18;
	--pg-x-f5f4f2: #1d1c1b;
	--pg-x-f5f5f5: #1d1c1b;
	--pg-x-f6f5f3: #1d1c1b;
	--pg-x-f7f7f5: #1d1c1b;
	--pg-x-f7f7f7: #151514;
	--pg-x-faf9f6: #151514;
	--pg-x-faf9f7: #151514;
	--pg-x-fff6ef: #151514;
	/* @tokens:end */

	/* legacy tokens still used by style.css */
	--pogo-ink: #f2f0ec;
	--pogo-muted: #9d9a93;
	--pogo-line: #2a2927;
}
html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"],
html[data-theme="dark"] body {
	background-color: var(--pg-paper);
	color: var(--pg-ink);
}

/* Native form controls and placeholders */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--pg-mute); opacity: 1; }
html[data-theme="dark"] ::selection { background: var(--pg-ink); color: var(--pg-on-ink); }
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--pg-ink);
	box-shadow: 0 0 0 1000px var(--pg-soft) inset;
	caret-color: var(--pg-ink);
}

/* Raster/SVG marks that are authored dark-on-transparent */
html[data-theme="dark"] .pogo-footer img[src*="logo"],
html[data-theme="dark"] .pogo-brand-logo,
html[data-theme="dark"] img.pogo-invert-dark { filter: invert(1) hue-rotate(180deg); }

/* ---- Dark-only fixes: hover states that were authored as "darker than the button" ---------- */
html[data-theme="dark"] .pogo-co--shopify #place_order:hover,
html[data-theme="dark"] .pogo-cd__place:hover {
	background: #fff !important;
	color: #0a0a0a !important;
	opacity: 1;
}
html[data-theme="dark"] .pogo-available-sizes .pogo-add-to-cart:hover { background: #d9d6cf; color: #0a0a0a; }