/**
 * Global CSS variables for AtProto UI components
 *
 * These variables can be customized in your application by setting them
 * at the :root level or within specific components.
 */

:root {
	/* Light theme colors (default) */
	--atproto-color-bg: #f5f7f9;
	--atproto-color-bg-elevated: #f8f9fb;
	--atproto-color-bg-secondary: #edf1f5;
	--atproto-color-text: #0f172a;
	--atproto-color-text-secondary: #475569;
	--atproto-color-text-muted: #64748b;
	--atproto-color-border: #d6dce3;
	--atproto-color-border-subtle: #c1cad4;
	--atproto-color-border-hover: #94a3b8;
	--atproto-color-link: #2563eb;
	--atproto-color-link-hover: #1d4ed8;
	--atproto-color-error: #dc2626;
	--atproto-color-primary: #2563eb;
	--atproto-color-button-bg: #edf1f5;
	--atproto-color-button-hover: #e3e9ef;
	--atproto-color-button-text: #0f172a;
	--atproto-color-bg-hover: #f0f3f6;
	--atproto-color-bg-pressed: #e3e9ef;
	--atproto-color-code-bg: #edf1f5;
	--atproto-color-code-border: #d6dce3;
	--atproto-color-blockquote-border: #c1cad4;
	--atproto-color-blockquote-bg: #f0f3f6;
	--atproto-color-hr: #d6dce3;
	--atproto-color-image-bg: #edf1f5;
	--atproto-color-highlight: #fef08a;
}

/* Dark theme - can be applied via [data-theme="dark"] or .dark class */
[data-theme="dark"],
.dark {
	--atproto-color-bg: #141b22;
	--atproto-color-bg-elevated: #1a222a;
	--atproto-color-bg-secondary: #0f161c;
	--atproto-color-text: #fafafa;
	--atproto-color-text-secondary: #a1a1aa;
	--atproto-color-text-muted: #71717a;
	--atproto-color-border: #1f2933;
	--atproto-color-border-subtle: #2d3748;
	--atproto-color-border-hover: #4a5568;
	--atproto-color-link: #60a5fa;
	--atproto-color-link-hover: #93c5fd;
	--atproto-color-error: #ef4444;
	--atproto-color-primary: #3b82f6;
	--atproto-color-button-bg: #1a222a;
	--atproto-color-button-hover: #243039;
	--atproto-color-button-text: #fafafa;
	--atproto-color-bg-hover: #1a222a;
	--atproto-color-bg-pressed: #243039;
	--atproto-color-code-bg: #0f161c;
	--atproto-color-code-border: #1f2933;
	--atproto-color-blockquote-border: #2d3748;
	--atproto-color-blockquote-bg: #1a222a;
	--atproto-color-hr: #243039;
	--atproto-color-image-bg: #1a222a;
	--atproto-color-highlight: #854d0e;
}

/* Support for system preference based theming */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]),
	:root[data-theme="system"] {
		--atproto-color-bg: #141b22;
		--atproto-color-bg-elevated: #1a222a;
		--atproto-color-bg-secondary: #0f161c;
		--atproto-color-text: #fafafa;
		--atproto-color-text-secondary: #a1a1aa;
		--atproto-color-text-muted: #71717a;
		--atproto-color-border: #1f2933;
		--atproto-color-border-subtle: #2d3748;
		--atproto-color-border-hover: #4a5568;
		--atproto-color-link: #60a5fa;
		--atproto-color-link-hover: #93c5fd;
		--atproto-color-error: #ef4444;
		--atproto-color-primary: #3b82f6;
		--atproto-color-button-bg: #1a222a;
		--atproto-color-button-hover: #243039;
		--atproto-color-button-text: #fafafa;
		--atproto-color-bg-hover: #1a222a;
		--atproto-color-bg-pressed: #243039;
		--atproto-color-code-bg: #0f161c;
		--atproto-color-code-border: #1f2933;
		--atproto-color-blockquote-border: #2d3748;
		--atproto-color-blockquote-bg: #1a222a;
		--atproto-color-hr: #243039;
		--atproto-color-image-bg: #1a222a;
		--atproto-color-highlight: #854d0e;
	}
}