:root {
	--bg: #ffffff;
	--bg-muted: #f5f5f7;
	--bg-elevated: #ffffff;
	--bg-glass: rgba(255, 255, 255, 0.55);

	--text: #1d1d1f;
	--text-secondary: #6e6e73;
	--text-muted: #a1a1a6;
	--text-inverse: #ffffff;

	--border: #e5e5ea;
	--border-subtle: #f2f2f4;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
	--shadow-overlay: rgba(0, 0, 0, 0.5);

	--primary: #20ac6a;
	--primary-hover: #1a915a;
	--primary-soft: rgba(32, 172, 106, 0.08);
	--primary-glass: rgba(32, 172, 106, 0.12);

	--success: #25a56a;
	--success-soft: rgba(37, 165, 106, 0.08);
	--danger: #eb5757;
	--danger-soft: rgba(235, 87, 87, 0.08);
	--warning: #ff9f0a;
	--warning-soft: rgba(255, 159, 10, 0.08);
	--info: #0a84ff;
	--info-soft: rgba(10, 132, 255, 0.08);

	--overlay-light: rgba(255, 255, 255, 0.9);
	--overlay-dark: rgba(0, 0, 0, 0.7);
	--overlay-medium: rgba(0, 0, 0, 0.25);

	--sheet-bg: #ffffff;
	--sheet-elevated: #fafafa;
	--sheet-text: #1d1d1f;
	--sheet-text-muted: #6e6e73;
	--sheet-border: #e0e0e0;
	--sheet-border-subtle: #f0f0f0;
	--sheet-control-bg: #f9f9f9;
	--sheet-close-bg: #f5f5f5;
	--sheet-close-color: #333333;

	--step-active: var(--primary);
	--step-done: var(--success);
	--step-inactive: #cccccc;

	--timer-text: #1d1d1f;
	--timer-bg: rgba(255, 255, 255, 0.9);
	--icon-color: #a1a1a6;
	--select-bg: #ffffff;
	--select-border: #d1d1d6;
	--select-text: #333333;
	--badge-danger: rgb(183, 28, 28);
	--danger-start: #ff2a2a;
	--danger-end: #b60000;

	--font-sans: "Google Sans Flex", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "SF Mono", "Fira Code", "Roboto Mono", monospace;
	--line-height-tight: 1.3;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.7;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
}

[data-theme="dark"] {
	--bg: #0d0d12;
	--bg-muted: #1c1c23;
	--bg-elevated: #1e1e2a;
	--bg-glass: rgba(20, 20, 30, 0.55);

	--text: #f5f5f7;
	--text-secondary: #98989d;
	--text-muted: #6e6e73;
	--text-inverse: #0d0d12;

	--border: #2c2c32;
	--border-subtle: #222228;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);

	--primary-soft: rgba(32, 172, 106, 0.15);
	--success-soft: rgba(37, 165, 106, 0.15);
	--danger-soft: rgba(235, 87, 87, 0.15);
	--warning-soft: rgba(255, 159, 10, 0.15);
	--info-soft: rgba(10, 132, 255, 0.15);

	--overlay-light: rgba(0, 0, 0, 0.8);
	--overlay-dark: rgba(0, 0, 0, 0.9);
	--overlay-medium: rgba(0, 0, 0, 0.5);

	--sheet-bg: #1a1a25;
	--sheet-elevated: #222230;
	--sheet-text: #f5f5f7;
	--sheet-text-muted: #9090a0;
	--sheet-border: #333345;
	--sheet-border-subtle: #2a2a3a;
	--sheet-control-bg: #252535;
	--sheet-close-bg: #2a2a3a;
	--sheet-close-color: #ccc;

	--step-inactive: #3a3a48;

	--timer-text: #f5f5f7;
	--timer-bg: rgba(0, 0, 0, 0.8);
	--icon-color: #6e6e73;
	--select-bg: #1e1e2a;
	--select-border: #3a3a48;
	--select-text: #f5f5f7;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0d0d12;
		--bg-muted: #1c1c23;
		--bg-elevated: #1e1e2a;
		--bg-glass: rgba(20, 20, 30, 0.55);

		--text: #f5f5f7;
		--text-secondary: #98989d;
		--text-muted: #6e6e73;
		--text-inverse: #0d0d12;

		--border: #2c2c32;
		--border-subtle: #222228;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
		--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);

		--primary-soft: rgba(32, 172, 106, 0.15);
		--success-soft: rgba(37, 165, 106, 0.15);
		--danger-soft: rgba(235, 87, 87, 0.15);
		--warning-soft: rgba(255, 159, 10, 0.15);
		--info-soft: rgba(10, 132, 255, 0.15);

		--overlay-light: rgba(0, 0, 0, 0.8);
		--overlay-dark: rgba(0, 0, 0, 0.9);
		--overlay-medium: rgba(0, 0, 0, 0.5);

		--sheet-bg: #1a1a25;
		--sheet-elevated: #222230;
		--sheet-text: #f5f5f7;
		--sheet-text-muted: #9090a0;
		--sheet-border: #333345;
		--sheet-border-subtle: #2a2a3a;
		--sheet-control-bg: #252535;
		--sheet-close-bg: #2a2a3a;
		--sheet-close-color: #ccc;

		--step-inactive: #3a3a48;

		--timer-text: #f5f5f7;
		--timer-bg: rgba(0, 0, 0, 0.8);
		--icon-color: #6e6e73;
		--select-bg: #1e1e2a;
		--select-border: #3a3a48;
		--select-text: #f5f5f7;
	}
}

:root {
	--border-color: var(--border);
	--primary-color: var(--primary);
	--background-color: var(--bg);
	--background-muted-color: var(--bg-muted);
	--text-color: var(--text);
	--text-muted-color: var(--text-muted);
	--muted-light: var(--text-muted);
	--muted-dark: var(--text-secondary);
	--white: #ffffff;
	--black: #000000;
	--danger-color: var(--danger);
	--danger-mid: var(--badge-danger);
	--info-color: var(--info);
	--success-color: var(--success);
	--accent-warning: var(--warning);
	--accent-warning-dark: #f4511e;
	--accent-warning-shadow: rgba(255, 159, 10, 0.3);
	--overlay-color: var(--overlay-light);
	--overlay-strong: rgba(255, 255, 255, 0.98);
	--shadow-color: rgba(0, 0, 0, 0.08);
	--box-shadow-strong: rgba(0, 0, 0, 0.3);
	--plyr-badge-background: #4a5464;
	--plyr-badge-text-color: #fff;
	--select2-bg: var(--select-bg);
	--select2-border: var(--select-border);
	--select2-text: var(--select-text);
	--icon-color: var(--icon-color);
}