/* Global Styles - Mobile-First */

/* ── Base tokens (shared across themes) ── */
:root {
	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;

	/* Typography sizes */
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;

	/* Layout */
	--content-max-width: 768px;
	--border-radius: 0.5rem;
}

/* ── Theme: Obsidian (dark productivity) ── */
[data-theme="obsidian"] {
	--font-sans: "Inter", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

	--color-primary: #39d0ba;
	--color-primary-dark: #2db8a4;
	--color-secondary: #8b949e;
	--color-success: #3fb950;
	--color-danger: #f85149;
	--color-warning: #d29922;
	--color-accent: #39d0ba;

	--bg-primary: #161b22;
	--bg-secondary: #0d1117;
	--bg-tertiary: #21262d;

	--text-primary: #e6edf3;
	--text-secondary: #8b949e;
	--text-tertiary: #484f58;

	--border-color: #30363d;

	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

	--focus-ring: rgba(57, 208, 186, 0.3);

	/* Semantic badge colors */
	--color-project-bg: rgba(57, 208, 186, 0.12);
	--color-project-text: #39d0ba;
	--color-priority-high-bg: rgba(248, 81, 73, 0.15);
	--color-priority-high-text: #f85149;
	--color-priority-medium-bg: rgba(210, 153, 34, 0.15);
	--color-priority-medium-text: #d29922;
	--color-priority-low-bg: rgba(139, 148, 158, 0.1);
	--color-priority-low-text: #8b949e;
	--color-due-bg: rgba(57, 208, 186, 0.1);
	--color-due-text: #39d0ba;
	--color-due-today-bg: rgba(210, 153, 34, 0.15);
	--color-due-today-text: #d29922;
	--color-overdue-bg: rgba(248, 81, 73, 0.15);
	--color-overdue-text: #f85149;
	--color-tag-bg: rgba(139, 148, 158, 0.1);
	--color-tag-text: #8b949e;

	color-scheme: dark;
}

/* ── Theme: Paper (warm minimal) ── */
[data-theme="paper"] {
	--font-sans: "Inter", "SF Pro Text", system-ui, sans-serif;
	--font-mono: ui-monospace, "SF Mono", monospace;

	--color-primary: #6366f1;
	--color-primary-dark: #4f46e5;
	--color-secondary: #78716c;
	--color-success: #10b981;
	--color-danger: #e11d48;
	--color-warning: #d97706;
	--color-accent: #6366f1;

	--bg-primary: #ffffff;
	--bg-secondary: #faf8f5;
	--bg-tertiary: #f5f5f4;

	--text-primary: #1c1917;
	--text-secondary: #78716c;
	--text-tertiary: #a8a29e;

	--border-color: #e7e5e4;

	--shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08);

	--focus-ring: rgba(99, 102, 241, 0.2);

	/* Semantic badge colors */
	--color-project-bg: #e0e7ff;
	--color-project-text: #4338ca;
	--color-priority-high-bg: #ffe4e6;
	--color-priority-high-text: #be123c;
	--color-priority-medium-bg: #fef3c7;
	--color-priority-medium-text: #92400e;
	--color-priority-low-bg: #f5f5f4;
	--color-priority-low-text: #a8a29e;
	--color-due-bg: #dbeafe;
	--color-due-text: #1e40af;
	--color-due-today-bg: #fef3c7;
	--color-due-today-text: #92400e;
	--color-overdue-bg: #ffe4e6;
	--color-overdue-text: #be123c;
	--color-tag-bg: #f5f5f4;
	--color-tag-text: #78716c;

	color-scheme: light;
}

/* ── Theme: Midnight (vibrant dark) ── */
[data-theme="midnight"] {
	--font-sans: "Inter", system-ui, sans-serif;
	--font-mono: ui-monospace, monospace;

	--color-primary: #8b5cf6;
	--color-primary-dark: #7c3aed;
	--color-secondary: #94a3b8;
	--color-success: #34d399;
	--color-danger: #ef4444;
	--color-warning: #f97316;
	--color-accent: #8b5cf6;

	--bg-primary: #1e293b;
	--bg-secondary: #0f172a;
	--bg-tertiary: #334155;

	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--text-tertiary: #64748b;

	--border-color: #334155;

	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

	--focus-ring: rgba(139, 92, 246, 0.3);

	/* Semantic badge colors */
	--color-project-bg: rgba(139, 92, 246, 0.15);
	--color-project-text: #a78bfa;
	--color-priority-high-bg: rgba(239, 68, 68, 0.15);
	--color-priority-high-text: #ef4444;
	--color-priority-medium-bg: rgba(249, 115, 22, 0.15);
	--color-priority-medium-text: #f97316;
	--color-priority-low-bg: rgba(148, 163, 184, 0.1);
	--color-priority-low-text: #94a3b8;
	--color-due-bg: rgba(139, 92, 246, 0.1);
	--color-due-text: #a78bfa;
	--color-due-today-bg: rgba(249, 115, 22, 0.15);
	--color-due-today-text: #f97316;
	--color-overdue-bg: rgba(239, 68, 68, 0.15);
	--color-overdue-text: #ef4444;
	--color-tag-bg: rgba(148, 163, 184, 0.1);
	--color-tag-text: #94a3b8;

	color-scheme: dark;
}

/* ── Reset & Base ── */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	min-height: 100dvh;
	overflow-x: hidden;
}

/* Typography */
h1 {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: var(--spacing-md);
}

h2 {
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--spacing-sm);
}

h3 {
	font-size: var(--font-size-lg);
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: var(--spacing-sm);
}

p {
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Layout Helpers */
.container {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* Utility Classes */
.text-center {
	text-align: center;
}

.text-sm {
	font-size: var(--font-size-sm);
}

.text-secondary {
	color: var(--text-secondary);
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.hidden {
	display: none;
}

/* Loading State */
.loading {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Touch Targets - Mobile First */
button,
a,
input,
select,
textarea {
	min-height: 44px;
	min-width: 44px;
}

/* Focus Styles */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Smooth Scrolling */
html {
	scroll-behavior: smooth;
}