/* Shared BattleLab theme — warm off-white light mode.
   Mirrors the CSS variables from app/globals.css so static pages
   (builder, play) look consistent with the Next.js shell. */

:root {
	--bg-page: linear-gradient(135deg, #f0e6d0 0%, #d0e4b8 30%, #b0d4dc 60%, #f0e6d0 100%);
	--bg-secondary: #eae8e3;
	--bg-panel: #ffffff;
	--bg-panel-hover: #f8f6f2;
	--bg-input: #f0ede8;
	--bg-row: #f5f3ef;
	--bg-row-active: #eae7e0;
	--bg-row-active-border: #5b7ff5;
	--border: #d8d5ce;
	--border-focus: #5b6eae;
	--text: #2a2a28;
	--text-secondary: #5c5a56;
	--text-muted: #8a8884;
	--accent: #4a6de0;
	--accent-hover: #3d5cc8;
	--accent-subtle: rgba(74, 109, 224, 0.10);
	--danger: #d44;
	--success: #3a9e76;
	--warning: #c48a28;
	--radius: 8px;
	--radius-lg: 12px;
	--font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
	--shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.08);
	--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] {
	--bg-page: linear-gradient(135deg, #10182e 0%, #0c2830 30%, #1e1820 60%, #10182e 100%);
	--bg-secondary: #1a2038;
	--bg-panel: #181e30;
	--bg-panel-hover: #1e2640;
	--bg-input: #141a2c;
	--bg-row: #1a2038;
	--bg-row-active: #222a48;
	--bg-row-active-border: #5b7ff5;
	--border: #2a3450;
	--border-focus: #6b7ec0;
	--text: #d8dce8;
	--text-secondary: #9aa0b4;
	--text-muted: #606878;
	--accent: #6b8ef0;
	--accent-hover: #5a7de0;
	--accent-subtle: rgba(107, 142, 240, 0.12);
	--danger: #e06060;
	--success: #4ab888;
	--warning: #d8a840;
	--shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.3);
	--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	color: var(--text);
	background: var(--bg-page);
	background-attachment: fixed;
	color-scheme: light;
}
[data-theme="dark"] body { color-scheme: dark; }

/* ── Theme toggle ── */
.theme-toggle {
	position: relative; width: 44px; height: 24px; border-radius: 12px;
	background: var(--border); border: none; cursor: pointer; padding: 0;
	transition: background 0.2s;
}
.theme-toggle::after {
	content: ''; position: absolute; top: 3px; left: 3px;
	width: 18px; height: 18px; border-radius: 50%;
	background: white; transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="dark"] .theme-toggle { background: var(--accent); }
[data-theme="dark"] .theme-toggle::after { transform: translateX(20px); }
.theme-toggle-label {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
}
.theme-toggle-label .icon-sun,
.theme-toggle-label .icon-moon { font-size: 14px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea {
	font: inherit;
	background: var(--bg-input);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 4px 8px;
	outline: none;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--border-focus);
}