:root {
	/* Color tokens */
	--primary: #00cc99;
	--primary-600: #00b894;
	--bg-dark: #121212;
	--bg-card: #1e1e1e;
	--bg-secondary: #2c2c2c;
	--text-light: #ffffff;
	--muted: #aaaaaa;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Shadow */
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
	--shadow-md: 0 4px 15px rgba(0,0,0,0.2);

	/* Focus utilities */
	--focus-outline-color: var(--primary);
	--focus-outline-offset: 2px;
}

/* Buttons (baseline, pages can override specifics) */
.btn {
	padding: 0.6rem 1rem;
	border: none;
	border-radius: var(--radius-md);
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px; /* mobile hit target */
	cursor: pointer;
	transition: transform .15s ease, background .2s ease, color .2s ease, opacity .2s ease;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
	background: var(--primary);
	color: #000;
}
.btn-primary:hover { background: var(--primary-600); }
.btn-outline {
	background: transparent;
	color: var(--primary);
	border: 2px solid var(--primary);
}
.btn-outline:hover { background: rgba(0, 204, 153, 0.12); }
.btn-secondary {
	background: var(--bg-secondary);
	color: var(--text-light);
}
.btn-secondary:hover { background: #343434; }
.btn-danger {
	background: #ff5b5b;
	color: #000;
}
.btn-danger:hover { background: #ff3f3f; }

/* Global focus-visible for interactive elements */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid var(--focus-outline-color);
	outline-offset: var(--focus-outline-offset);
}

/* Safe area insets for edge-to-edge display (Android/iOS) */
/* Only apply when actually needed - handled by safe-area.js script */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}