/* Theme Variables for Light and Dark Mode */
:root {
	/* Light mode colors (default) */
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--bg-tertiary: #fafafa;
	--text-primary: #333333;
	--text-secondary: #666666;
	--text-tertiary: #999999;
	--border-color: #e0e0e0;
	--shadow-color: rgba(0, 0, 0, 0.1);

	/* Pale/Subdued button colors for light mode */
	--btn-primary: #9fa3d3;
	--btn-primary-hover: #8a8ec0;
	--btn-secondary: #8fa5d4;
	--btn-secondary-hover: #7a92c1;
	--btn-success: #7db875;
	--btn-success-hover: #6fa366;
	--btn-warning: #d4a968;
	--btn-warning-hover: #c1965a;
	--btn-danger: #d4826e;
	--btn-danger-hover: #c1705f;
	--btn-info: #8fa5d4;
	--btn-info-hover: #7a92c1;
	--btn-purple: #b696d2;
	--btn-purple-hover: #a483bf;

	/* Status colors (pale) */
	--status-success-bg: #dff0d8;
	--status-success-text: #3c763d;
	--status-error-bg: #f2dede;
	--status-error-text: #a94442;
	--status-info-bg: #d9edf7;
	--status-info-text: #31708f;
}

/* Dark mode colors - via system preference media query */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-primary: #1e1e1e;
		--bg-secondary: #2d2d2d;
		--bg-tertiary: #3a3a3a;
		--text-primary: #e8e8e8;
		--text-secondary: #b0b0b0;
		--text-tertiary: #808080;
		--border-color: #444444;
		--shadow-color: rgba(0, 0, 0, 0.3);

		/* Pale/Subdued button colors for dark mode */
		--btn-primary: #6b6f94;
		--btn-primary-hover: #7d81a6;
		--btn-secondary: #5d7392;
		--btn-secondary-hover: #6f85a4;
		--btn-success: #5b8d52;
		--btn-success-hover: #6d9f64;
		--btn-warning: #b8915c;
		--btn-warning-hover: #caa36e;
		--btn-danger: #a85a4a;
		--btn-danger-hover: #ba6c5c;
		--btn-info: #5d7392;
		--btn-info-hover: #6f85a4;
		--btn-purple: #8a6fa6;
		--btn-purple-hover: #9c81b8;

		/* Status colors (pale, dark mode) */
		--status-success-bg: #1e4620;
		--status-success-text: #a3d9a3;
		--status-error-bg: #4a2020;
		--status-error-text: #e8b4b4;
		--status-info-bg: #1a3a4a;
		--status-info-text: #9cd4e8;
	}
}

/* Dark mode colors - via data-theme attribute (JavaScript detection) */
html[data-theme="dark"],
html[data-theme="dark"] :root {
	--bg-primary: #1e1e1e;
	--bg-secondary: #2d2d2d;
	--bg-tertiary: #3a3a3a;
	--text-primary: #e8e8e8;
	--text-secondary: #b0b0b0;
	--text-tertiary: #808080;
	--border-color: #444444;
	--shadow-color: rgba(0, 0, 0, 0.3);

	/* Pale/Subdued button colors for dark mode */
	--btn-primary: #6b6f94;
	--btn-primary-hover: #7d81a6;
	--btn-secondary: #5d7392;
	--btn-secondary-hover: #6f85a4;
	--btn-success: #5b8d52;
	--btn-success-hover: #6d9f64;
	--btn-warning: #b8915c;
	--btn-warning-hover: #caa36e;
	--btn-danger: #a85a4a;
	--btn-danger-hover: #ba6c5c;
	--btn-info: #5d7392;
	--btn-info-hover: #6f85a4;
	--btn-purple: #8a6fa6;
	--btn-purple-hover: #9c81b8;

	/* Status colors (pale, dark mode) */
	--status-success-bg: #1e4620;
	--status-success-text: #a3d9a3;
	--status-error-bg: #4a2020;
	--status-error-text: #e8b4b4;
	--status-info-bg: #1a3a4a;
	--status-info-text: #9cd4e8;
}

/* Light mode colors - explicit via data-theme attribute for override */
html[data-theme="light"],
html[data-theme="light"] :root {
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--bg-tertiary: #fafafa;
	--text-primary: #333333;
	--text-secondary: #666666;
	--text-tertiary: #999999;
	--border-color: #e0e0e0;
	--shadow-color: rgba(0, 0, 0, 0.1);

	/* Pale/Subdued button colors for light mode */
	--btn-primary: #9fa3d3;
	--btn-primary-hover: #8a8ec0;
	--btn-secondary: #8fa5d4;
	--btn-secondary-hover: #7a92c1;
	--btn-success: #7db875;
	--btn-success-hover: #6fa366;
	--btn-warning: #d4a968;
	--btn-warning-hover: #c1965a;
	--btn-danger: #d4826e;
	--btn-danger-hover: #c1705f;
	--btn-info: #8fa5d4;
	--btn-info-hover: #7a92c1;
	--btn-purple: #b696d2;
	--btn-purple-hover: #a483bf;

	/* Status colors (pale) */
	--status-success-bg: #dff0d8;
	--status-success-text: #3c763d;
	--status-error-bg: #f2dede;
	--status-error-text: #a94442;
	--status-info-bg: #d9edf7;
	--status-info-text: #31708f;
}

/* Alternative class-based theme selection (fallback) */
html.theme-dark {
	--bg-primary: #1e1e1e;
	--bg-secondary: #2d2d2d;
	--bg-tertiary: #3a3a3a;
	--text-primary: #e8e8e8;
	--text-secondary: #b0b0b0;
	--text-tertiary: #808080;
	--border-color: #444444;
	--shadow-color: rgba(0, 0, 0, 0.3);
	--btn-primary: #6b6f94;
	--btn-primary-hover: #7d81a6;
	--btn-secondary: #5d7392;
	--btn-secondary-hover: #6f85a4;
	--btn-success: #5b8d52;
	--btn-success-hover: #6d9f64;
	--btn-warning: #b8915c;
	--btn-warning-hover: #caa36e;
	--btn-danger: #a85a4a;
	--btn-danger-hover: #ba6c5c;
	--btn-info: #5d7392;
	--btn-info-hover: #6f85a4;
	--btn-purple: #8a6fa6;
	--btn-purple-hover: #9c81b8;
	--status-success-bg: #1e4620;
	--status-success-text: #a3d9a3;
	--status-error-bg: #4a2020;
	--status-error-text: #e8b4b4;
	--status-info-bg: #1a3a4a;
	--status-info-text: #9cd4e8;
}

html.theme-light {
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--bg-tertiary: #fafafa;
	--text-primary: #333333;
	--text-secondary: #666666;
	--text-tertiary: #999999;
	--border-color: #e0e0e0;
	--shadow-color: rgba(0, 0, 0, 0.1);
	--btn-primary: #9fa3d3;
	--btn-primary-hover: #8a8ec0;
	--btn-secondary: #8fa5d4;
	--btn-secondary-hover: #7a92c1;
	--btn-success: #7db875;
	--btn-success-hover: #6fa366;
	--btn-warning: #d4a968;
	--btn-warning-hover: #c1965a;
	--btn-danger: #d4826e;
	--btn-danger-hover: #c1705f;
	--btn-info: #8fa5d4;
	--btn-info-hover: #7a92c1;
	--btn-purple: #b696d2;
	--btn-purple-hover: #a483bf;
	--status-success-bg: #dff0d8;
	--status-success-text: #3c763d;
	--status-error-bg: #f2dede;
	--status-error-text: #a94442;
	--status-info-bg: #d9edf7;
	--status-info-text: #31708f;
}

/* Apply theme colors to body and standard elements */
body {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

.header {
	background-color: var(--bg-primary);
	box-shadow: 0 2px 4px var(--shadow-color);
	color: var(--text-primary);
}

.card {
	background-color: var(--bg-primary);
	box-shadow: 0 2px 4px var(--shadow-color);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
}

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

/* Button styles with pale colors */
.btn {
	background-color: var(--btn-primary);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	padding: 8px 16px;
	transition: background-color 0.2s ease;
}

.btn:hover {
	background-color: var(--btn-primary-hover);
}

.btn:active {
	opacity: 0.9;
}

.folder-btn {
	background-color: var(--btn-secondary);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	padding: 10px 20px;
	transition: background-color 0.2s ease;
	display: inline-block;
}

.folder-btn:hover {
	background-color: var(--btn-secondary-hover);
}

.track-btn {
	background-color: var(--btn-secondary);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	padding: 6px 12px;
	font-size: 12px;
	transition: background-color 0.2s ease;
}

.track-btn:hover {
	background-color: var(--btn-secondary-hover);
}

.track-btn.tracked {
	background-color: var(--btn-success);
}

.track-btn.tracked:hover {
	background-color: var(--btn-success-hover);
}

.status {
	background-color: var(--status-info-bg);
	color: var(--status-info-text);
	padding: 10px;
	border-radius: 4px;
	margin: 10px 0;
	border: 1px solid var(--border-color);
}

.folder-item {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	transition: background-color 0.2s ease;
}

.folder-item:hover {
	background-color: var(--bg-tertiary);
}

.back-btn {
	margin-bottom: 15px;
}

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

.spinner {
	border: 3px solid var(--bg-tertiary);
	border-top: 3px solid var(--btn-primary);
}

/* Ensure text is visible in all theme modes */
.container {
	color: var(--text-primary);
}

.nav {
	color: var(--text-primary);
}

.nav-buttons {
	display: flex;
	gap: 10px;
}

/* Additional button variations for different actions */
.btn-success {
	background-color: var(--btn-success);
}

.btn-success:hover {
	background-color: var(--btn-success-hover);
}

.btn-warning {
	background-color: var(--btn-warning);
}

.btn-warning:hover {
	background-color: var(--btn-warning-hover);
}

.btn-danger {
	background-color: var(--btn-danger);
}

.btn-danger:hover {
	background-color: var(--btn-danger-hover);
}

.btn-info {
	background-color: var(--btn-info);
}

.btn-info:hover {
	background-color: var(--btn-info-hover);
}

.btn-purple {
	background-color: var(--btn-purple);
}

.btn-purple:hover {
	background-color: var(--btn-purple-hover);
}