/* tglgames.com — shared theme tokens
   Every page should link this, then override only game-specific colors. */

:root {
	/* Dark is the default (site was built dark-first). */
	--bg:          #0f1115;
	--panel:       #161a22;
	--grid:        #1b2030;
	--text:        #e5e7eb;
	--muted:       #8b93a7;
	--accent:      #60a5fa;
	--warn:        #fbbf24;
	--ok:          #6ee7b7;
	--danger:      #fca5a5;
	--overlay-bg:  rgba(15, 17, 21, 0.82);

	/* Snake-specific — overridden by light below */
	--snake:       #6ee7b7;
	--snake-head:  #34d399;
	--food:        #f472b6;

	color-scheme: dark;
}

/* Explicit dark — wins over OS preference when user has chosen dark. */
:root[data-theme="dark"] { color-scheme: dark; }

/* Light palette */
:root[data-theme="light"] {
	--bg:          #f6f7fb;
	--panel:       #ffffff;
	--grid:        #e3e7ef;
	--text:        #0f172a;
	--muted:       #64748b;
	--accent:      #2563eb;
	--warn:        #b45309;
	--ok:          #047857;
	--danger:      #b91c1c;
	--overlay-bg:  rgba(246, 247, 251, 0.88);

	--snake:       #059669;
	--snake-head:  #047857;
	--food:        #db2777;

	color-scheme: light;
}

/* Theme toggle button — drop-in for any page header */
.theme-toggle {
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 4px 8px;
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	line-height: 1;
	transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.theme-toggle:hover {
	color: var(--text);
	border-color: var(--grid);
}
:root[data-theme="light"] .theme-toggle .moon,
:root:not([data-theme="light"]) .theme-toggle .sun {
	display: none;
}