/*
 * Theme palette. Clone a new coin site by editing this file only.
 * Light values live on :root. Dark values live on html.ft-dark.
 * Component CSS reads var(--ft-*). Do not paste these hexes elsewhere.
 */
:root {
	--ft-brand: hsl(225deg 14.29% 10.98%);
	--ft-brand-ink: hsl(48.24deg 97.07% 59.8%);
	--ft-brand-ring: rgba(67, 9, 5, 0.5);
	--ft-header: hsl(225deg 14.29% 10.98%);
	--ft-hero-start: #62120c;
	--ft-hero-end: #aa3e36;
	--ft-hero: linear-gradient(180deg,#8bc34a29,#00bcd45c);
	--ft-page: hsl(0 0% 97.25%);
	--ft-muted: hsl(210 15% 95%);
	--ft-card: hsl(0 0% 100%);
	--ft-border: hsl(216 16% 90%);
	--ft-text: hsl(20 7% 25%);
	--ft-ink: hsl(20 51% 4%);
	--ft-footer: hsl(213 15% 14%);
	--ft-footer-ink: hsl(216 14% 93%);
	--ft-primary: hsl(225deg 14.29% 10.98%);
	--ft-primary-ink: hsl(48.24deg 97.07% 59.8%);
	--ft-danger: #ef4444;
	--ft-accent: hsl(48.24deg 97.07% 59.8%);
	--ft-link: hsl(199 98% 48%);
	--ft-balance: hsl(48.24deg 97.07% 59.8%);
	--ft-balance-ink: #000000;
	--ft-row-head: hsl(0 0% 87%);
	--ft-row-odd: hsl(53 81% 96%);
	--ft-row-even: hsl(0 0% 94%);
	--ft-success: #16a34a;
	--ft-roll: #2563eb;
	--ft-claim-box: #faf5ff;
	--ft-claim-line: #d8b4fe;
	--ft-claim-title: #7c3aed;
	--ft-claim-rail: #eceff3;
	--ft-wait: #eef2ff;
	--ft-wait-line: #a5b4fc;
	--ft-wait-inset: rgba(255, 255, 255, 0.5);
	--ft-wait-chip: #e0e7ff;
	--ft-wait-ink: #4338ca;
	--ft-gold: #ffd700;
	--ft-star-on: #0f1729;
	--ft-star-off: #e5e7eb;
	--ft-overlay: rgba(0, 0, 0, 0.5);
	--ft-radius: 8px;
	--ft-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--ft-wrap: 1170px;
}
html.ft-dark {
	color-scheme: dark;
 --ft-hero: linear-gradient(180deg,rgba(139,195,74,.06),rgba(0,188,212,.12));
	--ft-page: hsl(225 30% 6%);
	--ft-muted: hsl(225 18% 16%);
	--ft-card: hsl(225 25% 9%);
	--ft-border: hsl(225 16% 18%);
	--ft-text: hsl(225 10% 65%);
	--ft-ink: hsl(48 30% 96%);
	--ft-link: hsl(199 90% 60%);
	--ft-header: hsl(225 35% 8%);
	--ft-brand: hsl(48 97% 60%);
	--ft-footer: hsl(225 30% 7%);
	--ft-footer-ink: hsl(48 20% 88%);
	--ft-primary: hsl(48 97% 60%);
	--ft-primary-ink: hsl(225 30% 10%);
	--ft-danger: #ef4444;
	--ft-balance: hsl(48 97% 60%);
	--ft-balance-ink: #000000;
	--ft-row-head: hsl(225 18% 20%);
	--ft-row-odd: hsl(225 20% 12%);
	--ft-row-even: hsl(225 16% 15%);
	--ft-success: #22c55e;
	--ft-roll: #0868a7;
	--ft-claim-box: #271532;
	--ft-claim-line: #6b21a8;
	--ft-claim-title: #d8b4fe;
	--ft-claim-rail: #16293a;
	--ft-wait: #16182b;
	--ft-wait-line: #3730a3;
	--ft-wait-inset: #101222;
	--ft-wait-chip: #1e1b4b;
	--ft-wait-ink: #a5b4fc;
	--ft-gold: #ffd700;
	--ft-star-on: #f4f6f5;
	--ft-star-off: #3d4a47;
	--ft-overlay: rgba(14, 22, 20, 0.82);
}
*::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
*::-webkit-scrollbar-track {
	background: transparent;
}
*::-webkit-scrollbar-thumb {
	background-color: var(--ft-border);
	border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
	background-color: #d1d5db;
}
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-corner {
	display: none;
	width: 0;
	height: 0;
	background: transparent;
}
.ft-footer-tools { position: relative; }
.ft-theme-pop {
	display: none;
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 50;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border: 1px solid var(--ft-border);
	border-radius: 8px;
	background: var(--ft-card);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.12);
}
.ft-theme-pop.is-open { display: flex; }
.ft-theme-pop button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--ft-text);
	cursor: pointer;
	box-shadow: none;
}
.ft-theme-pop button svg { width: 16px; height: 16px; display: block; }
.ft-theme-pop button.is-on,
.ft-theme-pop button.is-on:hover {
	background: var(--ft-primary);
	color: var(--ft-primary-ink);
}

/* Drop's Foundation sheet paints every button with a white top inset.
   :where() keeps this weaker than any class shadow a component sets itself. */
:where(body.ft-app, body.ft-body) button,
:where(body.ft-app, body.ft-body) .button,
:where(body.ft-app, body.ft-body) button:hover,
:where(body.ft-app, body.ft-body) .button:hover,
:where(body.ft-app, body.ft-body) button:focus,
:where(body.ft-app, body.ft-body) .button:focus,
:where(body.ft-app, body.ft-body) button:active,
:where(body.ft-app, body.ft-body) .button:active {
	box-shadow: none;
}