/**
 * Espy Blog — visitor-selectable themes.
 *
 * Each theme overrides the espy-blog design tokens on the document root, so the
 * whole token-driven site re-skins with no per-element rules. Colour tokens
 * (and, for a couple of themes, fonts / radii) are all that change. The picker
 * widget at the bottom is styled from the SAME tokens, so it always matches the
 * active theme.
 *
 * @package EspyBlogCore
 */

/* ----------------------------------------------------------------- Themes */

html[data-espy-theme="sand"] {
	--bg:#ECEAE7; --surface:#FFFFFF; --surface-2:#F6F5F3;
	--text:#24211F; --muted:#8A8580; --border:#E4E1DD;
	--primary:#DC7454; --primary-deep:#C25A3A; --primary-contrast:#fff;
	--code-bg:#2B2724; --code-text:#EDE6DF;
}

html[data-espy-theme="midnight"] {
	--bg:#0d1117; --surface:#161b22; --surface-2:#1c232c;
	--text:#e6edf3; --muted:#8b949e; --border:#2a313c;
	--primary:#58a6ff; --primary-deep:#388bfd; --primary-contrast:#04101f;
	--chart-dark:#c9d1d9; --chart-light:#30363d; --code-bg:#010409; --code-text:#e6edf3;
}

html[data-espy-theme="forest"] {
	--bg:#eef3ec; --surface:#ffffff; --surface-2:#e7efe4;
	--text:#1b2a1e; --muted:#6f7d70; --border:#d7e2d3;
	--primary:#2f7d4f; --primary-deep:#256540; --primary-contrast:#fff;
	--code-bg:#14261a; --code-text:#e7f2ea;
}

html[data-espy-theme="ocean"] {
	--bg:#eaf1f6; --surface:#ffffff; --surface-2:#e1ecf3;
	--text:#132430; --muted:#6b7f8c; --border:#d2e0ea;
	--primary:#2b7bb9; --primary-deep:#215f8f; --primary-contrast:#fff;
	--code-bg:#0f2432; --code-text:#e6f0f7;
}

html[data-espy-theme="rose"] {
	--bg:#fbeff2; --surface:#ffffff; --surface-2:#f7e6ea;
	--text:#2a1c21; --muted:#8a7178; --border:#f0d8de;
	--primary:#d1477a; --primary-deep:#b23a66; --primary-contrast:#fff;
	--code-bg:#2b1720; --code-text:#f5e6ec;
}

html[data-espy-theme="amber"] {
	--bg:#1a1512; --surface:#241d18; --surface-2:#2c2219;
	--text:#f0e7df; --muted:#b3a494; --border:#392d22;
	--primary:#e0a458; --primary-deep:#c9873a; --primary-contrast:#1a1512;
	--chart-dark:#e8ddd0; --chart-light:#3a2e23; --code-bg:#0f0b08; --code-text:#f0e7df;
}

html[data-espy-theme="slate"] {
	--bg:#12161b; --surface:#1a2027; --surface-2:#222932;
	--text:#e2e7ec; --muted:#8b97a3; --border:#2b333d;
	--primary:#33b1a5; --primary-deep:#268f85; --primary-contrast:#04120f;
	--chart-dark:#cdd4db; --chart-light:#2b333d; --code-bg:#0b0e12; --code-text:#e2e7ec;
}

html[data-espy-theme="sepia"] {
	--bg:#f4ecd8; --surface:#fbf5e6; --surface-2:#efe6cf;
	--text:#463a2e; --muted:#8a7a63; --border:#e2d6bb;
	--primary:#a4703c; --primary-deep:#8a5c2e; --primary-contrast:#fff;
	--code-bg:#3a3020; --code-text:#f0e6d2;
	--font-display:Georgia,'Times New Roman',serif;
	--font-body:Georgia,'Times New Roman',serif;
	--font-read:Georgia,'Times New Roman',serif;
}

html[data-espy-theme="grape"] {
	--bg:#160f1f; --surface:#1f1730; --surface-2:#28203c;
	--text:#ece7f5; --muted:#a596c0; --border:#332844;
	--primary:#a978e0; --primary-deep:#8f5fce; --primary-contrast:#150e20;
	--chart-dark:#d9d0ec; --chart-light:#332844; --code-bg:#0d0814; --code-text:#ece7f5;
}

html[data-espy-theme="mono"] {
	--bg:#ffffff; --surface:#ffffff; --surface-2:#f2f2f2;
	--text:#0a0a0a; --muted:#666666; --border:#dcdcdc;
	--primary:#111111; --primary-deep:#000000; --primary-contrast:#ffffff;
	--code-bg:#111111; --code-text:#f5f5f5;
	--r-sm:4px; --r-md:6px; --r-lg:8px;
}

/* Smooth the transition when a reader switches themes. */
html[data-espy-theme] body,
html[data-espy-theme] body * {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ------------------------------------------------------------ Picker widget */

.espy-tp-fab {
	position: fixed; z-index: 99998; right: 18px; bottom: 18px;
	width: 46px; height: 46px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	background: var(--surface, #fff); color: var(--primary, #DC7454);
	border: 1px solid var(--border, #e4e1dd);
	box-shadow: 0 6px 20px rgba(0,0,0,.16); cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.espy-tp-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.espy-tp-fab:focus-visible { outline: 2px solid var(--primary, #DC7454); outline-offset: 2px; }
.espy-tp-fab svg { width: 22px; height: 22px; display: block; }

.espy-tp-panel {
	position: fixed; z-index: 99999; right: 18px; bottom: 74px;
	width: 264px; max-width: calc(100vw - 36px);
	background: var(--surface, #fff); color: var(--text, #24211f);
	border: 1px solid var(--border, #e4e1dd); border-radius: 16px;
	box-shadow: 0 16px 46px rgba(0,0,0,.26);
	padding: 14px; opacity: 0; transform: translateY(8px) scale(.98);
	pointer-events: none; transition: opacity .16s ease, transform .16s ease;
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.espy-tp-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.espy-tp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.espy-tp-title { font-weight: 700; font-size: 14px; color: var(--text, #24211f); }
.espy-tp-x {
	border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer;
	color: var(--muted, #8a8580); padding: 2px 6px; border-radius: 8px;
}
.espy-tp-x:hover { background: var(--surface-2, #f6f5f3); color: var(--text, #24211f); }

.espy-tp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.espy-tp-item {
	display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
	padding: 7px 9px; border-radius: 11px; cursor: pointer;
	background: var(--surface-2, #f6f5f3); border: 1.5px solid transparent; color: var(--text, #24211f);
	font-size: 12.5px; font-weight: 600; transition: border-color .14s ease, transform .14s ease;
}
.espy-tp-item:hover { transform: translateY(-1px); }
.espy-tp-item.is-active { border-color: var(--primary, #DC7454); }
.espy-tp-dot {
	flex: none; width: 22px; height: 22px; border-radius: 999px;
	border: 1px solid rgba(0,0,0,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	background-image: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-primary) 50% 100%);
}

@media (prefers-reduced-motion: reduce) {
	.espy-tp-fab, .espy-tp-panel, .espy-tp-item,
	html[data-espy-theme] body, html[data-espy-theme] body * { transition: none !important; }
}