/*
 * init.css
 * A lightweight reset + base styles for the dashboard.
 */

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

:root {
	--color-primary: #febc00;
	--color-primary-hover: #e0a600;
	--color-primary-active: #c79500;
	--color-primary-subtle: rgba(254, 188, 0, 0.12);
	--color-primary-glow: rgba(254, 188, 0, 0.25);
	--color-secondary: #202020;
	--color-text: #1f2937;
	--color-text-secondary: #6b7280;
	--color-text-muted: #9ca3af;
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-hover: #f3f4f6;
	--color-border: #e5e7eb;
	--color-border-strong: #d1d5db;
	--color-page-bg: #f1f1f1;
	--color-error: #ef4444;
	--color-error-subtle: #fee2e2;
	--color-success: #10b981;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] {
	--color-primary: #febc00;
	--color-primary-hover: #ffca28;
	--color-primary-active: #ffd54f;
	--color-primary-subtle: rgba(254, 188, 0, 0.15);
	--color-primary-glow: rgba(254, 188, 0, 0.25);
	--color-secondary: #202020;
	--color-text: #e5e5e5;
	--color-text-secondary: #9ca3af;
	--color-text-muted: #6b7280;
	--color-bg: #121212;
	--color-surface: #1e1e1e;
	--color-surface-hover: #2a2a2a;
	--color-border: #333333;
	--color-border-strong: #444444;
	--color-page-bg: #0a0a0a;
	--color-error: #ef4444;
	--color-error-hover: #ff5252;
	--color-error-active: #ff6b6b;
	--color-error-subtle: rgba(239, 68, 68, 0.15);
	--color-success: #10b981;
	--shadow-small: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-large: 0 20px 60px rgba(0, 0, 0, 0.6);
}

html {
	font-family:
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		"Noto Sans",
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji";
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
}

body {
	min-height: 100vh;
	color: var(--color-text);
	background-color: var(--color-bg);
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}