/**
 * Taypro Desk dark theme only (Timeless Night).
 * Scoped to `data-theme-mode="dark"` so light theme is untouched.
 */

:root[data-theme-mode="dark"] {
	--taypro-primary: #38bdf8;
	--taypro-accent: #22d3ee;
	--taypro-link: #7dd3fc;

	--taypro-canvas: #070f1a;
	--taypro-navbar-bg: #050a12;
	--taypro-sidebar-bg: #0a1628;
	--taypro-surface-bg: var(--taypro-canvas);
	--taypro-elevated-bg: #121a24;
	--taypro-text: #e8f4fc;
	--taypro-muted: #94a3b8;
	--taypro-border: #273549;
	--taypro-highlight: rgba(56, 189, 248, 0.12);

	--primary: var(--taypro-primary);
	--brand-color: var(--taypro-primary);
	--btn-primary: var(--taypro-primary);
	--border-primary: var(--taypro-primary);

	--navbar-bg: var(--taypro-navbar-bg);
	--surface-menu-bar: var(--taypro-sidebar-bg);

	--text-color: var(--taypro-text);
	--heading-color: var(--taypro-text);
	--text-muted: var(--taypro-muted);
	--text-light: var(--taypro-muted);
	--text-neutral: var(--taypro-text);

	--bg-color: var(--taypro-canvas);
	--fg-color: var(--taypro-canvas);
	--card-bg: var(--taypro-canvas);
	--modal-bg: var(--taypro-elevated-bg);
	--toast-bg: var(--taypro-elevated-bg);
	--popover-bg: var(--taypro-elevated-bg);

	--control-bg: #1a222d;
	--border-color: var(--taypro-border);
	--table-border-color: var(--taypro-border);

	--highlight-color: var(--taypro-highlight);

	--btn-default-bg: #1c2632;
	--btn-default-hover-bg: #263240;

	--placeholder-color: #64748b;
	--focus-default: 0 0 0 2px rgba(56, 189, 248, 0.45);
}