:root {
	color-scheme: dark;
	--font-main: 'FiraCode NF', monospace;
	--font-accent: 'MapleMono NF', monospace;
	--font-icons: 'FiraCode NF', 'MapleMono NF', monospace;
	--bg: #181825;
	--surface: #2b2730; /* darker surface for tiles */
	--surface2: #3a3740; /* hover / secondary surface */
	--overlay: #73768a;
	--overlay2: #dbe3ff;
	--text: #cdd6f4;
	--muted: #8f95a9;
	--accent: #f38ba8;
	--border: #45475a;
	--radius-control: 10px;
	--radius-card: 22px;
	--shadow-card: 0 20px 48px rgba(0, 0, 0, 0.28);

	/* white alpha tokens (dark theme) */
	--s-w-03: rgba(255, 255, 255, 0.03);
	--s-w-04: rgba(255, 255, 255, 0.04);
	--s-w-05: rgba(255, 255, 255, 0.05);
	--s-w-06: rgba(255, 255, 255, 0.06);
	--s-w-08: rgba(255, 255, 255, 0.08);
	--s-w-10: rgba(255, 255, 255, 0.1);
	--s-w-12: rgba(255, 255, 255, 0.12);
	--s-w-14: rgba(255, 255, 255, 0.14);
	--s-w-16: rgba(255, 255, 255, 0.16);
	--s-w-20: rgba(255, 255, 255, 0.2);
	--s-w-25: rgba(255, 255, 255, 0.25);
	--s-w-40: rgba(255, 255, 255, 0.4);

	--radius: 8px;
	--gap: 15px;
	--maxw: 520px;
}

:root[data-theme='light'] {
	color-scheme: light;
	--bg: #f3f4f6;
	--surface: #ffffff;
	--surface2: #eef2f6;
	--muted: #4b5563;
	--overlay2: #f8fafc;
	--text: #0f1724;
	--accent: #1d4ed8;
	--border: #cbd5e1;
	--shadow-card: 0 16px 38px rgba(15, 23, 42, 0.1);

	/* white alpha tokens mapped to subtle dark alphas for light theme */
	--s-w-03: rgba(2,6,23,0.03);
	--s-w-04: rgba(2,6,23,0.04);
	--s-w-05: rgba(2,6,23,0.05);
	--s-w-06: rgba(2,6,23,0.06);
	--s-w-08: rgba(2,6,23,0.08);
	--s-w-10: rgba(2,6,23,0.10);
	--s-w-12: rgba(2,6,23,0.12);
	--s-w-14: rgba(2,6,23,0.14);
	--s-w-16: rgba(2,6,23,0.16);
	--s-w-20: rgba(2,6,23,0.20);
	--s-w-25: rgba(2,6,23,0.25);
	--s-w-40: rgba(2,6,23,0.40);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

html {
	scrollbar-gutter: stable;
}

body {
	font-family: var(--font-main);
	font-variant-ligatures: contextual common-ligatures;
	font-feature-settings:
		'liga' 1,
		'calt' 1;
	background-color: var(--bg);
	color: var(--text);
}

:where(a, button, [role='tab']):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
}

.icon {
	font-family: var(--font-icons);
}

.footer {
	margin-top: auto;
	padding: 24px 12px;
	text-align: center;
	font-size: 0.9rem;
}

.footer-quote,
#footer-quote {
	margin-bottom: 6px;
	opacity: 0.9;
	text-align: center;
}

.footer-contact {
	font-size: 0.85rem;
}

.footer a {
	color: var(--accent);
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

/* Light-theme global overrides for surface-like components */
[data-theme='light'] .card,
[data-theme='light'] .card.window,
[data-theme='light'] .plist a,
[data-theme='light'] .link-card,
[data-theme='light'] .link-chip,
[data-theme='light'] .panel-bar,
[data-theme='light'] .window-bar,
[data-theme='light'] .status-panel,
[data-theme='light'] .loadout-card,
[data-theme='light'] .perk-card,
[data-theme='light'] .mode-btn,
[data-theme='light'] .kitty-panel,
[data-theme='light'] .kitty-frame,
[data-theme='light'] .notice-disclaimer,
[data-theme='light'] .skin-card,
[data-theme='light'] .skin-folder-card,
[data-theme='light'] .skin-action,
[data-theme='light'] .side-shell,
[data-theme='light'] .tab-nav,
[data-theme='light'] .tab,
[data-theme='light'] .tile {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}

[data-theme='light'] .tab.is-active {
	background: var(--surface2);
	color: var(--text);
	border-color: var(--accent);
	box-shadow: 0 2px 8px var(--s-w-06);
}

[data-theme='light'] .tile.is-disabled,
[data-theme='light'] .link-card[disabled],
[data-theme='light'] .tab-nav:disabled {
	background: rgba(2,6,23,0.03);
	border: 1px dashed rgba(2,6,23,0.12);
	color: var(--muted);
	opacity: 0.9;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}